/* =========================================================
   樂齡生活 · 社區 / 訊息 / 我的 / 子女端 / 健康 / 訂單 / 幫助
   ========================================================= */

/* ---------------- 樂齡圈 ---------------- */
.community-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.community-main { min-width: 0; }
.composer { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 13px; }
.composer-input {
  flex: 1; text-align: left; background: #FBF7F1; border: 1px solid transparent;
  border-radius: 999px; padding: 10px 16px; font-size: .85rem; color: var(--muted);
  transition: border-color .18s;
}
.composer-input:hover { border-color: var(--line); color: var(--ink-2); }
.composer-tool { width: 40px; height: 40px; border-radius: 50%; background: #FBF7F1; color: var(--brand); display: grid; place-items: center; flex: none; }
.circle-bar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.circle-bar::-webkit-scrollbar { display: none; }
.post-list { display: grid; gap: 14px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-author { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.post-author strong { font-size: .88rem; display: flex; align-items: center; gap: 6px; }
.post-author small { font-size: .69rem; color: var(--muted); }
.official { font-size: .57rem; background: var(--brand-soft); color: var(--brand); padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.post-head .icon-btn { margin-left: auto; }
.post-text { font-size: .88rem; line-height: 1.8; color: var(--ink-2); margin-bottom: 10px; white-space: pre-wrap; }
.post-imgs { display: grid; gap: 5px; margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
.post-imgs.n1 { grid-template-columns: 1fr; }
.post-imgs.n2 { grid-template-columns: 1fr 1fr; }
.post-imgs.n3 { grid-template-columns: repeat(3, 1fr); }
.post-img { aspect-ratio: 4 / 3; overflow: hidden; background: #F4ECE2; display: block; }
.post-imgs.n1 .post-img { aspect-ratio: 16 / 8.5; }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-img:hover img { transform: scale(1.03); }
.post-actions { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 2px; }
.post-act { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--muted); }
.post-act:hover { color: var(--brand); }
.post-act.active { color: var(--brand); }
.post-act.active .icon { fill: currentColor; }
.post-act.right { margin-left: auto; }
.post-card.compact { padding: 15px; }
.post-card.compact .post-text { font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.community-aside { display: grid; gap: 14px; position: sticky; top: 94px; }
.me-card { padding: 18px; background: linear-gradient(160deg, #FFF7EE, #FBEADB); border-color: #F1DCC7; }
.me-card-top { display: flex; gap: 10px; align-items: center; }
.me-card-top > div { display: flex; flex-direction: column; line-height: 1.3; }
.me-card-top b { font-size: .94rem; }
.me-card-top small { font-size: .69rem; color: var(--muted); }
.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0; text-align: center; }
.me-stats > div { display: flex; flex-direction: column; border-right: 1px solid #EFDDC9; }
.me-stats > div:last-child { border: 0; }
.me-stats b { font-size: 1.02rem; }
.me-stats small { font-size: .64rem; color: var(--muted); }
.side-card { padding: 18px; }
.side-card h3 { font-size: .92rem; display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.side-card h3 .icon { color: var(--brand); }
.topic-list { display: grid; gap: 1px; }
.topic-row { display: flex; align-items: center; gap: 8px; padding: 8px 3px; font-size: .79rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.topic-row:last-child { border: 0; }
.topic-row span { flex: 1; }
.topic-row small { font-size: .64rem; color: var(--muted-2); }
.topic-row .icon { color: #CFC3B6; }
.topic-row:hover span { color: var(--brand); }
.active-users { display: grid; gap: 9px; }
.active-user { display: flex; align-items: center; gap: 9px; }
.active-user > div { display: flex; flex-direction: column; line-height: 1.3; }
.active-user b { font-size: .79rem; }
.active-user small { font-size: .63rem; color: var(--muted); }
.online-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #4E9B7F; box-shadow: 0 0 0 3px rgba(78,155,127,.14); }
.rules-card { background: #F7F4EC; }
.rules-card p { font-size: .75rem; color: var(--muted); line-height: 1.8; margin-bottom: 8px; }

/* ---------------- 訊息 ---------------- */
.messages-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.messages-main { padding: 0; overflow: hidden; }
.msg-tabs { padding: 0 16px; border-bottom: 1px solid var(--line); }
.msg-tabs .tab-btn { flex: 1; justify-content: center; padding: 13px 6px; font-size: .78rem; }
.msg-list { display: flex; flex-direction: column; }
.msg-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; text-align: left;
  border-bottom: 1px solid var(--line-soft); position: relative; transition: background .15s; width: 100%;
}
.msg-row:last-child { border-bottom: 0; }
.msg-row:hover { background: #FCF8F2; }
.msg-row.unread { background: #FFFBF6; }
.msg-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.msg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.msg-title { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.msg-title b { font-size: .85rem; }
.msg-title small { font-size: .65rem; color: var(--muted-2); flex: none; }
.msg-text { font-size: .76rem; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-type { font-size: .59rem; color: var(--muted-2); background: #F6F0E8; padding: 1px 5px; border-radius: 4px; align-self: flex-start; margin-top: 2px; }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; margin-top: 8px; }
.msg-arrow { color: #CFC3B6; align-self: center; flex: none; }
.messages-aside { display: grid; gap: 14px; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .79rem; }
.pref-row:last-of-type { border: 0; }
.pref-row > div { display: flex; flex-direction: column; gap: 2px; }
.pref-row b { font-size: .81rem; }
.pref-row small { font-size: .67rem; color: var(--muted); line-height: 1.5; }
.pref-note { font-size: .67rem; color: var(--muted-2); line-height: 1.65; margin-top: 8px; }
.notice-card p { font-size: .77rem; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }
.notice-card .btn { margin-top: 6px; }

/* ---------------- 我的 ---------------- */
.profile-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(120deg, #FFF7ED, #FBE7D4); border: 1px solid #F2DCC8;
  border-radius: 26px; padding: 26px 30px;
}
.profile-id { display: flex; gap: 16px; align-items: center; }
.profile-copy h1 { font-size: 1.65rem; display: flex; align-items: center; gap: 9px; letter-spacing: -.02em; }
.profile-copy p { font-size: .79rem; color: var(--muted); margin-top: 3px; }
.role-badge { font-size: .6rem; background: #fff; border: 1px solid #EBCDB8; color: #9A5A34; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.profile-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.profile-tags span { display: flex; align-items: center; gap: 4px; font-size: .65rem; background: rgba(255,255,255,.72); padding: 3px 8px; border-radius: 999px; color: #7E6855; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.profile-stat {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: border-color .16s, transform .16s; box-shadow: var(--shadow-sm);
}
.profile-stat:hover { border-color: #E6B79E; transform: translateY(-2px); }
.profile-stat b { font-size: 1.32rem; }
.profile-stat small { font-size: .68rem; color: var(--muted); }
.order-shortcuts { padding: 17px 19px; margin-bottom: 15px; }
.os-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.os-head h2 { font-size: 1rem; }
.os-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.os-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px; border-radius: 12px; transition: background .15s; }
.os-item:hover { background: #FBF6EF; }
.os-ic { width: 44px; height: 44px; border-radius: 13px; background: #F8F2EA; color: var(--brand); display: grid; place-items: center; position: relative; }
.os-ic i {
  position: absolute; top: -4px; right: -4px; background: var(--brand); color: #fff;
  font-size: .58rem; font-style: normal; min-width: 16px; height: 16px; border-radius: 999px;
  display: grid; place-items: center; border: 2px solid #fff; padding: 0 3px;
}
.os-item small { font-size: .7rem; color: var(--ink-2); }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.profile-main { display: grid; gap: 14px; }
.menu-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.menu-card h3 { font-size: .68rem; color: var(--muted-2); font-weight: 600; letter-spacing: .1em; padding: 13px 18px 5px; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; border-top: 1px solid var(--line-soft); text-align: left; transition: background .15s; }
.menu-row:hover { background: #FCF8F2; }
.menu-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #F7F1E9; color: var(--brand); }
.menu-ic.green { background: var(--green-soft); color: var(--green); }
.menu-ic.red { background: var(--danger-soft); color: var(--danger); }
.menu-ic.purple { background: var(--purple-soft); color: var(--purple); }
.menu-ic.blue { background: var(--blue-soft); color: var(--blue); }
.menu-ic.amber { background: var(--amber-soft); color: var(--amber); }
.menu-ic.gray { background: #F2EEE8; color: #7B7064; }
.menu-row > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.menu-row b { font-size: .85rem; }
.menu-row small { font-size: .69rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-row > .icon { color: #CFC3B6; flex: none; }
.logout-btn { margin-top: 0; }
.demo-note { font-size: .67rem; color: var(--muted-2); text-align: center; line-height: 1.6; }
.profile-aside { display: grid; gap: 14px; position: sticky; top: 94px; }
.display-card { padding: 18px; }
.display-card h3 { font-size: .94rem; display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.font-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); margin-top: 2px; }
.font-row > span { font-size: .79rem; }
.contact-mini p, .privacy-mini p { font-size: .75rem; color: var(--muted); line-height: 1.7; margin: 7px 0 10px; }
.contact-mini .btn + .btn { margin-top: 7px; }
.profile-aside .side-card h3 { font-size: .9rem; display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.profile-aside .side-card h3 .icon { color: var(--brand); }

/* ---------------- 子女端 ---------------- */
.family-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.12fr .88fr;
  gap: 28px; align-items: center; background: linear-gradient(120deg, #17493D, #1F6F5C 55%, #2C7C68);
  color: #fff; border-radius: 30px; padding: 36px 40px;
  box-shadow: 0 24px 52px rgba(23, 63, 53, .22);
}
.family-hero::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.05); top: -160px; right: 28%; }
.fh-copy { position: relative; z-index: 1; }
.fh-copy h1 { font-size: clamp(1.9rem, 3.4vw, 2.65rem); line-height: 1.18; letter-spacing: -.035em; margin: 8px 0 10px; }
.fh-copy p { font-size: .89rem; color: rgba(255,255,255,.72); line-height: 1.85; max-width: 520px; }
.fh-actions { display: flex; gap: 9px; margin-top: 20px; flex-wrap: wrap; }
.fh-stats { display: flex; gap: 0; margin-top: 24px; flex-wrap: wrap; }
.fh-stats > div { display: flex; flex-direction: column; padding: 0 20px; border-right: 1px solid rgba(255,255,255,.16); }
.fh-stats > div:first-child { padding-left: 0; }
.fh-stats > div:last-child { border: 0; }
.fh-stats b { font-size: 1.35rem; line-height: 1.2; }
.fh-stats small { font-size: .64rem; color: rgba(255,255,255,.6); }
.fh-media { position: relative; height: 300px; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 36px rgba(0,0,0,.2); z-index: 1; }
.fh-media img { width: 100%; height: 100%; object-fit: cover; }
.fh-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.3)); }
.fh-float {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px;
  background: rgba(255,255,255,.94); color: var(--ink); border-radius: 13px; padding: 9px 12px;
  display: flex; gap: 9px; align-items: center; box-shadow: 0 10px 22px rgba(0,0,0,.15);
}
.fh-float strong { display: block; font-size: .77rem; }
.fh-float small { font-size: .65rem; color: var(--muted); }
.parent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.parent-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px;
}
.parent-head { display: flex; align-items: center; gap: 10px; }
.parent-id { min-width: 0; flex: 1; }
.parent-id h3 { font-size: .98rem; display: flex; flex-direction: column; line-height: 1.3; }
.parent-id h3 span { font-size: .66rem; color: var(--muted); font-weight: 400; margin-top: 1px; }
.parent-id p { font-size: .66rem; color: var(--muted-2); display: flex; gap: 3px; align-items: center; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parent-status { display: inline-flex; align-items: center; gap: 4px; font-size: .63rem; padding: 3px 8px; border-radius: 999px; flex: none; font-weight: 600; }
.parent-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.parent-tags span { font-size: .61rem; background: #F7F1E9; color: #8C7663; padding: 2px 6px; border-radius: 5px; }
.parent-metrics { display: grid; grid-template-columns: repeat(3, 1fr); background: #FBF7F1; border-radius: 12px; padding: 9px 4px; gap: 2px; }
.parent-metrics > div { display: flex; flex-direction: column; gap: 0; text-align: center; border-right: 1px solid #F0E7DA; }
.parent-metrics > div:last-child { border: 0; }
.parent-metrics small { font-size: .57rem; color: var(--muted-2); }
.parent-metrics b { font-size: .84rem; letter-spacing: -.02em; }
.parent-metrics em { font-style: normal; font-size: .54rem; color: var(--muted-2); }
.warn-text { color: var(--danger) !important; }
.parent-last { font-size: .68rem; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.parent-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; border-top: 1px solid var(--line-soft); padding-top: 9px; margin-top: auto; }
.parent-actions button, .parent-actions a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .61rem; color: var(--muted); padding: 5px 2px; border-radius: 8px; }
.parent-actions button:hover, .parent-actions a:hover { background: #FBF7F1; color: var(--brand); }
.parent-actions .icon { color: var(--brand); }
.add-parent-card {
  border: 1.5px dashed #DBCBB9; border-radius: 20px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 24px; color: var(--muted);
  background: rgba(255,255,255,.45); min-height: 230px; text-align: center;
}
.add-parent-card:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.add-parent-card > span { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.add-parent-card b { font-size: .86rem; }
.add-parent-card small { font-size: .67rem; color: var(--muted-2); max-width: 180px; line-height: 1.5; }
.family-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.family-main { display: grid; gap: 14px; }
.family-aside { display: grid; gap: 14px; position: sticky; top: 94px; }
.timeline-card, .plans-card, .authz-card, .members-card, .reminders-card { padding: 20px; }
.day-timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; position: relative; }
.tl-item:not(:last-child)::after { content: ''; position: absolute; left: 62px; top: 27px; bottom: -5px; width: 1px; background: var(--line); }
.tl-time { width: 46px; font-size: .67rem; color: var(--muted); flex: none; padding-top: 2px; font-variant-numeric: tabular-nums; }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; margin-top: 5px; box-shadow: 0 0 0 3px var(--green-soft); z-index: 1; }
.tl-dot.tone-blue { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.tl-dot.tone-gold { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.tl-dot.tone-warn { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.tl-dot.tone-gray { background: #A99E91; box-shadow: 0 0 0 3px #F1EEE9; }
.tl-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tl-copy b { font-size: .81rem; }
.tl-copy small { font-size: .69rem; color: var(--muted); line-height: 1.5; }
.tl-state { font-size: .61rem; color: var(--muted-2); flex: none; margin-top: 2px; }
.plan-grid { display: grid; gap: 8px; }
.plan-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: #FDFBF7; }
.plan-ic { width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--brand); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-sm); }
.plan-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.plan-copy b { font-size: .81rem; }
.plan-copy small { font-size: .67rem; color: var(--muted); }
.plan-copy em { font-style: normal; font-size: .65rem; color: var(--brand); margin-top: 1px; }
.plan-status { font-size: .62rem; padding: 3px 8px; border-radius: 999px; flex: none; }
.authz-parent-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.authz-subject { display: flex; align-items: center; gap: 9px; background: #FBF7F1; border-radius: 11px; padding: 9px 12px; margin-bottom: 6px; }
.authz-subject > div { display: flex; flex-direction: column; line-height: 1.3; }
.authz-subject b { font-size: .79rem; }
.authz-subject small { font-size: .65rem; color: var(--muted); }
.authz-owner { margin-left: auto; font-size: .63rem; color: var(--muted-2); }
.authz-list { display: flex; flex-direction: column; }
.authz-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
.authz-row:last-child { border: 0; }
.authz-copy { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.authz-copy b { font-size: .79rem; display: flex; align-items: center; gap: 6px; }
.authz-copy small { font-size: .67rem; color: var(--muted); }
.sensitive-tag { font-size: .55rem; background: var(--danger-soft); color: var(--danger); padding: 1px 5px; border-radius: 4px; font-weight: 500; }
.authz-note { display: flex; gap: 6px; background: #FBF7F1; border-radius: 9px; padding: 9px 11px; font-size: .68rem; color: var(--muted); line-height: 1.6; margin-top: 10px; }
.timeline-card .card-head, .plans-card .card-head, .authz-card .card-head, .members-card .card-head, .reminders-card .card-head { margin-bottom: 10px; }
.member-list { display: flex; flex-wrap: wrap; gap: 8px; }
.member-item { display: flex; align-items: center; gap: 8px; background: #FBF7F1; border-radius: 10px; padding: 7px 10px; min-width: 150px; flex: 1; }
.member-item > div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.member-item b { font-size: .76rem; }
.member-item small { font-size: .62rem; color: var(--muted); }
.member-tag { font-size: .55rem; background: var(--brand-soft); color: var(--brand); border-radius: 4px; padding: 1px 5px; margin-left: auto; }
.member-invite { display: flex; align-items: center; gap: 6px; border: 1px dashed #DBCBB9; border-radius: 10px; padding: 7px 12px; font-size: .71rem; color: var(--muted); min-width: 130px; }
.member-invite:hover { border-color: var(--brand); color: var(--brand); }
.reminder-list { display: flex; flex-direction: column; gap: 9px; }
.reminder-item { display: flex; gap: 9px; padding: 11px; border-radius: 12px; background: #FBF7F1; border: 1px solid transparent; }
.reminder-item.tone-warn { background: #FDF3F1; border-color: #F6DCD6; }
.reminder-item.tone-info { background: #F1F6FB; border-color: #DFEAF4; }
.reminder-item.tone-gold { background: #FCF6E8; border-color: #F3E4BE; }
.reminder-ic { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--brand); flex: none; box-shadow: var(--shadow-sm); }
.reminder-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reminder-copy b { font-size: .76rem; }
.reminder-copy p { font-size: .69rem; color: var(--muted); line-height: 1.55; }
.reminder-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; gap: 6px; }
.reminder-foot small { font-size: .6rem; color: var(--muted-2); }
.reminder-foot a { font-size: .66rem; color: var(--brand); font-weight: 600; display: flex; align-items: center; gap: 1px; }
.emergency-card { padding: 18px; background: linear-gradient(160deg, #FFF7F1, #FDEDE6); border-color: #F1D8CB; }
.emergency-card h3 { font-size: .92rem; display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.emergency-card > p { font-size: .72rem; color: var(--muted); line-height: 1.65; margin-bottom: 10px; }
.emergency-list { display: grid; gap: 6px; }
.emergency-list a { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 9px; padding: 7px 9px; font-size: .74rem; }
.emergency-list a:hover { box-shadow: var(--shadow-sm); }
.emergency-list a > div { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.emergency-list b { font-size: .75rem; }
.emergency-list small { font-size: .62rem; color: var(--muted); }
.emergency-list .icon { color: var(--brand); }
.em-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: .6rem; font-weight: 700; flex: none; }
.em-ic.red { background: var(--danger-soft); color: var(--danger); }
.em-ic.blue { background: var(--blue-soft); color: var(--blue); }
.em-ic.green { background: var(--green-soft); color: var(--green); }
.em-note { display: flex; gap: 4px; font-size: .6rem; color: var(--muted-2); margin-top: 8px; line-height: 1.5; }
.elder-preview, .privacy-note-card { padding: 18px; }
.cross-border-card { padding: 18px; background: #F3F8F5; border-color: #DDEBE4; }
.cross-border-card h3 { font-size: .89rem; display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.cross-border-card p { font-size: .71rem; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }
.elder-preview h3, .privacy-note-card h3 { font-size: .89rem; display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.elder-preview p, .privacy-note-card p { font-size: .71rem; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }
.privacy-note-card { background: #F7F4EC; }

/* ---------------- 健康守護 ---------------- */
.health-lock { max-width: 620px; margin: 40px auto; padding: 44px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.lock-ic { width: 76px; height: 76px; border-radius: 50%; background: #F5EEE5; color: var(--brand); display: grid; place-items: center; margin-bottom: 14px; }
.health-lock h2 { font-size: 1.3rem; margin-bottom: 8px; }
.health-lock p { font-size: .87rem; color: var(--muted); line-height: 1.8; max-width: 460px; }
.lock-actions { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.lock-note { display: flex; gap: 5px; font-size: .69rem; color: var(--muted-2); margin-top: 16px; line-height: 1.6; text-align: left; }
.subject-switch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.subject-pill { display: flex; align-items: center; gap: 8px; padding: 7px 13px 7px 7px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: all .16s; }
.subject-pill > span { display: flex; flex-direction: column; line-height: 1.3; }
.subject-pill b { font-size: .81rem; }
.subject-pill small { font-size: .63rem; color: var(--muted); }
.subject-pill.active { border-color: var(--brand); background: var(--brand-tint); }
.subject-switch-note { margin-left: auto; font-size: .67rem; color: var(--muted-2); display: flex; gap: 4px; align-items: center; }
.health-alert { display: flex; align-items: center; gap: 12px; background: #FDF3F0; border: 1px solid #F4D8D0; border-radius: 14px; padding: 13px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ha-ic { width: 40px; height: 40px; border-radius: 11px; background: #fff; color: var(--danger); display: grid; place-items: center; flex: none; }
.health-alert > div { flex: 1; min-width: 220px; }
.health-alert b { font-size: .85rem; }
.health-alert p { font-size: .74rem; color: var(--muted); line-height: 1.6; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.metric-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 15px; display: flex; flex-direction: column; gap: 5px; box-shadow: var(--shadow-sm); }
.metric-top { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; color: var(--muted); }
.metric-tag { font-size: .59rem; padding: 2px 6px; border-radius: 999px; font-weight: 600; }
.metric-tag.good { background: var(--green-soft); color: var(--green); }
.metric-tag.warn { background: var(--danger-soft); color: var(--danger); }
.metric-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.metric-value small { font-size: .98rem; color: var(--muted); font-weight: 500; }
.metric-value em { font-style: normal; font-size: .64rem; color: var(--muted); font-weight: 400; }
.metric-foot { display: flex; align-items: center; gap: 4px; font-size: .62rem; color: var(--muted-2); }
.health-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.health-main { display: grid; gap: 16px; }
.health-aside { display: grid; gap: 14px; position: sticky; top: 94px; }
.chart-card, .meds-card, .records-card { padding: 20px; }
.chart-legend { display: flex; gap: 12px; font-size: .66rem; color: var(--muted); }
.chart-legend span { display: flex; align-items: center; gap: 4px; }
.lg-sys, .lg-dia { width: 9px; height: 3px; border-radius: 2px; display: inline-block; }
.lg-sys { background: #E4572E; }
.lg-dia { background: #2C7A66; }
.bp-chart { width: 100%; height: auto; margin: 6px 0 2px; overflow: visible; }
.chart-grid { stroke: #F0E8DE; stroke-width: 1; }
.chart-label, .chart-xlabel { fill: #A49A8E; font-size: 10px; font-family: inherit; }
.line-sys { fill: none; stroke: #E4572E; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.line-dia { fill: none; stroke: #2C7A66; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dot-sys { fill: #fff; stroke: #E4572E; stroke-width: 2; }
.dot-dia { fill: #fff; stroke: #2C7A66; stroke-width: 2; }
.chart-note, .med-note { display: flex; gap: 5px; font-size: .67rem; color: var(--muted-2); line-height: 1.6; margin-top: 8px; }
.med-list { display: flex; flex-direction: column; }
.med-item { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
.med-item:last-child { border: 0; }
.med-time { font-size: .71rem; font-weight: 700; color: var(--ink-2); width: 42px; flex: none; font-variant-numeric: tabular-nums; }
.med-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.med-copy b { font-size: .79rem; }
.med-copy small { font-size: .66rem; color: var(--muted); }
.med-state { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: .64rem; color: var(--muted); display: flex; align-items: center; gap: 3px; flex: none; }
.med-state.done { background: var(--green-soft); border-color: transparent; color: var(--green); font-weight: 600; }
.med-item.done .med-copy b { color: var(--muted); }
.record-list { display: flex; flex-direction: column; }
.record-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.record-item:last-child { border: 0; }
.record-date { font-size: .66rem; color: var(--muted-2); width: 62px; flex: none; padding-top: 1px; }
.record-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.record-copy b { font-size: .79rem; }
.record-copy p { font-size: .71rem; color: var(--muted); line-height: 1.6; }
.record-tag { align-self: flex-start; font-size: .58rem; background: #F5EFE6; color: #8C7663; padding: 1px 6px; border-radius: 4px; margin-top: 2px; }
.device-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.device-item { display: flex; align-items: center; gap: 8px; }
.device-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.device-ic.ok { background: var(--green-soft); color: var(--green); }
.device-ic.off { background: #F2EEE8; color: var(--muted-2); }
.device-item > div { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.device-item b { font-size: .75rem; }
.device-item small { font-size: .62rem; color: var(--muted); }
.device-status { font-size: .58rem; padding: 2px 6px; border-radius: 999px; flex: none; }
.device-status.ok { background: var(--green-soft); color: var(--green); }
.device-status.off { background: #F2EEE8; color: var(--muted-2); }
.device-note { display: flex; gap: 4px; font-size: .62rem; color: var(--muted-2); line-height: 1.5; margin-top: 8px; }
.source-list { display: grid; gap: 4px; margin-bottom: 9px; }
.source-list > div { display: flex; justify-content: space-between; gap: 10px; font-size: .71rem; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.source-list span { color: var(--muted); }
.source-list b { font-size: .71rem; }
.health-help p { font-size: .74rem; color: var(--muted); line-height: 1.65; margin-bottom: 9px; }
.health-help .link-inline { margin-top: 8px; justify-content: center; width: 100%; }
.health-disclaimer { display: flex; gap: 6px; font-size: .67rem; color: var(--muted-2); line-height: 1.7; background: #F7F3EC; border-radius: 12px; padding: 11px 14px; margin-top: 18px; }

/* ---------------- 訂單 ---------------- */
.orders-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.osu-item { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 11px 14px; box-shadow: var(--shadow-sm); }
.osu-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.osu-ic.amber { background: var(--amber-soft); color: var(--amber); }
.osu-ic.blue { background: var(--blue-soft); color: var(--blue); }
.osu-ic.green { background: var(--green-soft); color: var(--green); }
.osu-ic.gray { background: #F2EEE8; color: var(--muted); }
.osu-item b { font-size: 1.04rem; }
.osu-item small { font-size: .67rem; color: var(--muted); margin-left: auto; }
.orders-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 18px; margin-bottom: 14px; flex-wrap: wrap; }
.order-tabs { border: 0; flex: 1; min-width: 0; }
.order-tabs .tab-btn { padding: 14px 9px; font-size: .78rem; }
.buyer-filter { display: flex; gap: 5px; flex-wrap: wrap; padding-bottom: 6px; }
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-card { background: #fff; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; box-shadow: var(--shadow-sm); }
.oc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: #FDFAF6; border-bottom: 1px solid var(--line-soft); }
.oc-type { display: flex; align-items: center; gap: 7px; font-size: .75rem; min-width: 0; }
.oc-type-ic { width: 24px; height: 24px; border-radius: 7px; background: #fff; color: var(--brand); display: grid; place-items: center; box-shadow: var(--shadow-sm); flex: none; }
.oc-type b { font-size: .77rem; }
.oc-type small { font-size: .63rem; color: var(--muted-2); margin-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-main { display: flex; gap: 13px; padding: 14px 16px; align-items: flex-start; }
.oc-thumb { width: 94px; height: 72px; border-radius: 10px; overflow: hidden; flex: none; background: #F3EBE1; }
.oc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.oc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oc-title { font-size: .89rem; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-title:hover { color: var(--brand); }
.oc-row { font-size: .69rem; color: var(--muted); display: flex; align-items: center; gap: 4px; line-height: 1.5; }
.oc-provider { color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-refund { font-size: .67rem; color: var(--purple); display: flex; align-items: center; gap: 4px; }
.oc-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.oc-amount strong { font-size: 1.06rem; letter-spacing: -.02em; }
.oc-amount small { font-size: .61rem; color: var(--muted-2); }
.oc-foot { display: flex; justify-content: flex-end; gap: 7px; padding: 10px 16px 13px; flex-wrap: wrap; }

/* ---------------- 訂單詳情 ---------------- */
.order-status-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 15px;
  border-radius: 20px; padding: 20px 24px; margin-bottom: 18px; flex-wrap: wrap;
  background: #FDFAF5; border: 1px solid var(--line); color: var(--ink);
}
.order-status-hero.tone-amber { background: linear-gradient(120deg, #FFF8E9, #FCEFD2); border-color: #F1DFB9; }
.order-status-hero.tone-blue { background: linear-gradient(120deg, #F2F7FC, #E6F0FA); border-color: #DCE8F4; }
.order-status-hero.tone-green { background: linear-gradient(120deg, #F2F9F5, #E5F3EC); border-color: #D8EBE1; }
.order-status-hero.tone-teal { background: linear-gradient(120deg, #F2F8F6, #E4F1ED); border-color: #D6E9E3; }
.order-status-hero.tone-gray { background: linear-gradient(120deg, #FAF8F4, #F2EEE8); border-color: #EAE2D8; }
.order-status-hero.tone-purple { background: linear-gradient(120deg, #F8F5FC, #EFE9F7); border-color: #E4DAF1; }
.osh-ic { width: 58px; height: 58px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); flex: none; }
.order-status-hero.tone-amber .osh-ic { color: var(--amber); }
.order-status-hero.tone-blue .osh-ic { color: var(--blue); }
.order-status-hero.tone-green .osh-ic { color: var(--green); }
.order-status-hero.tone-teal .osh-ic { color: var(--teal); }
.order-status-hero.tone-gray .osh-ic { color: #7B7064; }
.order-status-hero.tone-purple .osh-ic { color: var(--purple); }
.osh-copy { flex: 1; min-width: 220px; }
.osh-copy .eyebrow { color: var(--muted); font-size: .62rem; }
.osh-copy h1 { font-size: 1.65rem; line-height: 1.2; color: var(--ink); }
.osh-copy p { font-size: .76rem; color: var(--muted); }
.osh-amount { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.osh-amount small { font-size: .64rem; color: var(--muted); }
.osh-amount strong { font-size: 1.38rem; color: var(--ink); letter-spacing: -.03em; }
.osh-amount span { font-size: .62rem; color: var(--muted-2); }
.osh-actions { display: flex; gap: 7px; flex-wrap: wrap; width: 100%; justify-content: flex-end; border-top: 1px solid rgba(0,0,0,.06); padding-top: 11px; margin-top: 1px; }
.order-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.order-detail-main { display: grid; gap: 14px; }
.order-detail-aside { display: grid; gap: 14px; position: sticky; top: 94px; }
.progress-card, .order-product-card, .cost-card, .rules-card, .review-card { padding: 20px; }
.order-no-pill { font-size: .64rem; background: #F5EFE7; color: var(--muted); padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.progress-list { display: flex; flex-direction: column; position: relative; }
.progress-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; position: relative; }
.progress-item:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 30px; bottom: -9px; width: 1px; background: var(--line); }
.progress-dot { width: 23px; height: 23px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; flex: none; margin-top: 1px; }
.progress-item.latest .progress-dot { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(228,87,46,.12); }
.progress-item.pending .progress-dot { background: #F1ECE5; color: var(--muted-2); }
.progress-copy { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.progress-copy b { font-size: .79rem; }
.progress-copy small { font-size: .67rem; color: var(--muted); line-height: 1.5; }
.progress-time { font-size: .62rem; color: var(--muted-2); flex: none; padding-top: 2px; text-align: right; }
.progress-item.pending { opacity: .65; }
.order-product { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 13px; border-bottom: 1px solid var(--line-soft); }
.op-img { width: 110px; height: 84px; border-radius: 11px; overflow: hidden; flex: none; }
.op-img img { width: 100%; height: 100%; object-fit: cover; }
.op-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.op-title { font-size: .93rem; font-weight: 650; }
.op-title:hover { color: var(--brand); }
.op-meta { font-size: .69rem; color: var(--muted); display: flex; align-items: center; gap: 4px; line-height: 1.5; flex-wrap: wrap; }
.op-provider { font-size: .69rem; color: var(--muted-2); }
.op-note { font-size: .67rem; color: var(--muted); background: #FBF7F1; border-radius: 7px; padding: 5px 8px; display: flex; gap: 4px; align-items: flex-start; }
.order-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 12px; }
.order-people > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.order-people small { font-size: .6rem; color: var(--muted-2); }
.order-people b { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-stars { font-size: .9rem; }
.review-card > p { font-size: .81rem; color: var(--ink-2); line-height: 1.8; }
.cost-list { display: flex; flex-direction: column; gap: 7px; }
.cost-list > div { display: flex; justify-content: space-between; gap: 14px; font-size: .79rem; color: var(--muted); }
.cost-list b { color: var(--ink); font-weight: 600; }
.cost-list .discount { color: var(--green); }
.cost-total { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 9px; font-size: .9rem; }
.cost-total b { font-size: 1.22rem; color: var(--brand); }
.cost-note { display: flex; gap: 5px; font-size: .66rem; color: var(--muted-2); line-height: 1.6; margin-top: 9px; }
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.rule-grid > div { background: #FBF7F1; border-radius: 10px; padding: 11px; }
.rule-grid b { font-size: .75rem; }
.rule-grid p { font-size: .68rem; color: var(--muted); line-height: 1.6; margin-top: 2px; }
.info-list { display: flex; flex-direction: column; gap: 8px; }
.info-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: .71rem; color: var(--muted); }
.info-list b { color: var(--ink); font-weight: 500; text-align: right; font-size: .71rem; display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.copy-btn { width: 20px; height: 20px; border-radius: 5px; background: #F5EFE7; color: var(--muted); display: grid; place-items: center; }
.support-card p { font-size: .74rem; color: var(--muted); line-height: 1.65; margin-bottom: 9px; }
.support-card .btn + .btn { margin-top: 6px; }
.safety-card ul { display: grid; gap: 5px; }
.safety-card li { font-size: .7rem; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.safety-card .icon { color: var(--green); }
.pending-step { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 10px; font-size: .72rem; color: var(--muted); }

/* ---------------- 優惠券 ---------------- */
.coupon-tabs { display: flex; gap: 7px; margin-bottom: 16px; }
.coupon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coupon-card {
  display: flex; align-items: stretch; background: #fff; border: 1px solid #F0D9CC;
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); position: relative;
}
.coupon-amount {
  width: 126px; flex: none; background: linear-gradient(150deg, #E4572E, #D97B36); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  position: relative; padding: 16px 8px;
}
.coupon-amount::after { content: ''; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--bg); }
.coupon-amount span { font-size: .76rem; opacity: .9; }
.coupon-amount strong { font-size: 2.1rem; line-height: 1.05; letter-spacing: -.04em; }
.coupon-amount small { font-size: .6rem; opacity: .85; background: rgba(255,255,255,.18); padding: 1px 6px; border-radius: 4px; margin-top: 3px; white-space: nowrap; }
.coupon-info { flex: 1; padding: 13px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coupon-info b { font-size: .86rem; }
.coupon-info p { font-size: .67rem; color: var(--muted); }
.coupon-info small { font-size: .64rem; color: var(--muted-2); }
.coupon-action { display: flex; align-items: center; padding-right: 14px; flex: none; }
.coupon-card.used { filter: grayscale(.75); opacity: .62; border-color: var(--line); }
.coupon-card.used .coupon-amount { background: #B9B0A5; }
.coupon-used { font-size: .69rem; color: var(--muted); }
.coupon-rules { padding: 20px; margin-top: 20px; }
.coupon-rules h3 { font-size: .94rem; display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.coupon-rules li { font-size: .73rem; color: var(--muted); line-height: 1.7; padding-left: 13px; position: relative; }
.coupon-rules li::before { content: '·'; position: absolute; left: 2px; color: var(--brand); font-weight: 800; }

/* ---------------- 幫助 ---------------- */
.help-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.help-contact { padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; transition: transform .18s, box-shadow .18s; }
.help-contact:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hc-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px; }
.hc-ic.red { background: var(--danger-soft); color: var(--danger); }
.hc-ic.green { background: var(--green-soft); color: var(--green); }
.hc-ic.blue { background: var(--blue-soft); color: var(--blue); }
.help-contact b { font-size: .84rem; }
.help-contact strong { font-size: 1.08rem; }
.help-contact small { font-size: .69rem; color: var(--muted); }
.hc-link { margin-top: 8px; font-size: .74rem; color: var(--brand); display: flex; gap: 3px; align-items: center; font-weight: 600; }
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.help-main { display: grid; gap: 14px; }
.faq-card, .help-guarantee { padding: 20px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item:last-child { border: 0; }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; font-size: .84rem; font-weight: 600; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { color: var(--muted); transition: transform .2s; }
.faq-item[open] summary span { transform: rotate(180deg); }
.faq-item p { font-size: .77rem; color: var(--muted); line-height: 1.8; padding: 0 0 13px; max-width: 760px; }
.hg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.hg-grid > div { background: #FBF7F1; border-radius: 10px; padding: 11px; }
.hg-grid b { font-size: .77rem; }
.hg-grid p { font-size: .69rem; color: var(--muted); line-height: 1.6; margin-top: 2px; }
.help-aside { display: grid; gap: 14px; position: sticky; top: 94px; }
.hours-list { display: grid; gap: 6px; }
.hours-list > div { display: flex; justify-content: space-between; gap: 10px; font-size: .73rem; padding: 4px 0; border-bottom: 1px dashed var(--line-soft); }
.hours-list span { color: var(--muted); }
.hours-list b { font-weight: 600; font-size: .73rem; }
.danger-note { background: #FDF2EF; border-color: #F5D8D0; }
.danger-note p { font-size: .73rem; color: #8E5A50; line-height: 1.7; }

/* ---------------- 彈窗內容 ---------------- */
.product-modal { display: grid; grid-template-columns: 1fr 1.12fr; gap: 22px; }
.pm-media { position: relative; border-radius: 16px; overflow: hidden; background: #F4ECE2; min-height: 290px; }
.pm-media img { width: 100%; height: 100%; object-fit: cover; }
.pm-tag { position: absolute; left: 10px; top: 10px; background: rgba(255,252,247,.94); color: #8A5A34; font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.pm-body h2 { font-size: 1.28rem; line-height: 1.35; margin: 7px 0 5px; }
.pm-spec { font-size: .75rem; color: var(--muted); }
.pm-rating { display: flex; align-items: center; gap: 6px; font-size: .73rem; margin: 8px 0; color: var(--muted); }
.pm-price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0; }
.pm-price strong { font-size: 1.75rem; color: var(--brand); letter-spacing: -.03em; }
.pm-price del { font-size: .8rem; color: var(--muted-2); }
.pm-desc { font-size: .79rem; color: var(--ink-2); line-height: 1.8; margin: 8px 0; }
.pm-list { display: grid; gap: 5px; margin: 10px 0; }
.pm-list li { font-size: .71rem; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.pm-list .icon { color: var(--green); }
.pm-buy { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pm-buy .qty-stepper { flex: none; }
.pm-buy .btn { flex: 1; }

.bk-service-row { display: flex; gap: 12px; background: #FBF7F1; border-radius: 12px; padding: 10px; margin-bottom: 16px; }
.bk-service-img { width: 82px; height: 62px; border-radius: 9px; overflow: hidden; flex: none; }
.bk-service-img img { width: 100%; height: 100%; object-fit: cover; }
.bk-service-info { display: flex; flex-direction: column; gap: 2px; font-size: .71rem; color: var(--muted); }
.bk-service-info b { font-size: .79rem; color: var(--ink); }
.bk-service-info span { color: var(--brand); font-weight: 600; }
.bk-field { margin-bottom: 14px; }
.bk-field > label { display: block; font-size: .77rem; font-weight: 600; margin-bottom: 7px; }
.bk-qty-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); margin-top: 4px; }
.bk-qty-row > span { font-size: .79rem; }
.bk-summary { background: #FBF7F1; border-radius: 12px; padding: 12px 14px; margin: 11px 0; display: grid; gap: 6px; }
.bk-summary > div { display: flex; justify-content: space-between; font-size: .77rem; color: var(--muted); }
.bk-summary b { color: var(--ink); font-weight: 600; }
.bk-total-row { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; font-size: .85rem; }
.bk-total-row strong { font-size: 1.28rem; color: var(--brand); }

.success-state { text-align: center; padding: 8px 4px; }
.success-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; margin: 0 auto 14px; }
.success-state h2 { font-size: 1.38rem; }
.success-state > p { font-size: .81rem; color: var(--muted); margin-top: 4px; }
.success-card { background: #FBF7F1; border-radius: 13px; padding: 14px; text-align: left; margin: 16px 0; display: grid; gap: 6px; }
.success-card > div { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; color: var(--muted); }
.success-card b { color: var(--ink); font-weight: 600; text-align: right; }
.success-total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.success-total b { color: var(--brand); font-size: 1.02rem; }

.pay-amount { background: linear-gradient(135deg, #FFF6EB, #FDE8D7); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 14px; }
.pay-amount small { font-size: .68rem; color: var(--muted); }
.pay-amount strong { font-size: 2.15rem; color: var(--brand); letter-spacing: -.04em; line-height: 1.2; }
.pay-amount span { font-size: .67rem; color: var(--muted); }
.pay-methods { display: grid; gap: 7px; }
.pay-method { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; text-align: left; background: #fff; }
.pay-method.active { border-color: var(--brand); background: var(--brand-tint); }
.pm-ic { width: 34px; height: 34px; border-radius: 9px; background: #F7F1E9; display: grid; place-items: center; color: var(--brand); flex: none; }
.pay-method > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.pay-method b { font-size: .79rem; }
.pay-method small { font-size: .63rem; color: var(--muted); }
.pm-check { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: transparent; flex: none; }
.pay-method.active .pm-check { background: var(--brand); border-color: var(--brand); color: #fff; }

.checkout-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.checkout-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: #FBF7F1; border-radius: 10px; }
.checkout-item > span { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; }
.checkout-item img { width: 100%; height: 100%; object-fit: cover; }
.checkout-item > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.checkout-item b { font-size: .77rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkout-item small { font-size: .65rem; color: var(--muted); }
.checkout-item em { font-style: normal; font-size: .81rem; font-weight: 600; }
.order-mini-summary { background: #FBF7F1; border-radius: 11px; padding: 11px 13px; display: grid; gap: 5px; margin: 12px 0; }
.order-mini-summary > div { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.order-mini-summary b { color: var(--ink); }
.order-mini-summary .total { border-top: 1px solid var(--line); padding-top: 7px; margin-top: 2px; color: var(--ink); }
.order-mini-summary .total b { color: var(--brand); font-size: 1.04rem; }

/* 購物車抽屜 */
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: 1.1rem; }
.cart-head small { font-size: .69rem; color: var(--muted); }
.cart-body { flex: 1; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.cart-thumb { width: 62px; height: 62px; border-radius: 9px; overflow: hidden; flex: none; background: #F4ECE2; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-copy b { font-size: .77rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-copy small { font-size: .63rem; color: var(--muted); }
.cart-price { font-size: .79rem; color: var(--brand); font-weight: 600; }
.cart-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.cart-remove { font-size: .62rem; color: var(--muted-2); }
.cart-remove:hover { color: var(--danger); }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 50px 10px; color: var(--muted); text-align: center; flex: 1; }
.cart-empty .icon { color: #CFC3B6; margin-bottom: 4px; }
.cart-empty b { color: var(--ink); font-size: .9rem; }
.cart-empty p { font-size: .75rem; margin-bottom: 8px; }
.cart-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.cart-total span { font-size: .79rem; color: var(--muted); }
.cart-total strong { font-size: 1.45rem; color: var(--brand); letter-spacing: -.03em; }

/* 城市 / 篩選 / 地址 / 發票 / 收藏 / 通知 / 歷史 / SOS / 客服 */
.city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.city-item { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; text-align: left; position: relative; }
.city-item.active { border-color: var(--brand); background: var(--brand-tint); }
.city-ic { width: 34px; height: 34px; border-radius: 9px; background: #F7F1E9; display: grid; place-items: center; color: var(--brand); flex: none; }
.city-item > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; }
.city-item b { font-size: .79rem; }
.city-item small { font-size: .65rem; color: var(--muted); }
.city-tag { position: absolute; top: 7px; right: 8px; font-size: .56rem; background: var(--brand); color: #fff; padding: 1px 5px; border-radius: 4px; }
.city-tag.cross { background: var(--teal); }
.modal-filter-group { margin-bottom: 14px; }
.modal-filter-group h4 { font-size: .77rem; margin-bottom: 7px; }
.modal-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.address-list { display: flex; flex-direction: column; gap: 8px; }
.address-item { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; background: #FBF7F1; border-radius: 10px; }
.addr-ic { width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--brand); display: grid; place-items: center; flex: none; }
.addr-copy { flex: 1; min-width: 0; }
.addr-copy b { font-size: .77rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.addr-copy b small { font-size: .64rem; color: var(--muted); font-weight: 400; }
.addr-tag { font-size: .55rem; background: var(--brand-soft); color: var(--brand); padding: 1px 5px; border-radius: 4px; }
.addr-copy p { font-size: .69rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.address-item .link-inline { font-size: .67rem; flex: none; }
.add-address { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.add-address h4 { display: flex; align-items: center; gap: 5px; font-size: .79rem; margin-bottom: 9px; }
.invoice-orders { display: grid; gap: 6px; margin-bottom: 14px; }
.invoice-order { display: flex; align-items: center; gap: 8px; background: #FBF7F1; border-radius: 9px; padding: 8px 10px; }
.io-ic { width: 28px; height: 28px; border-radius: 7px; background: #fff; color: var(--brand); display: grid; place-items: center; flex: none; }
.invoice-order > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.invoice-order b { font-size: .73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-order small { font-size: .62rem; color: var(--muted); }
.io-status { font-size: .59rem; color: var(--green); }
.invoice-form h4 { font-size: .79rem; margin-bottom: 8px; }
.fav-list { display: flex; flex-direction: column; gap: 8px; }
.fav-item { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 10px; }
.fav-thumb { width: 56px; height: 46px; border-radius: 7px; overflow: hidden; flex: none; }
.fav-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fav-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fav-copy a { font-size: .79rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-copy small { font-size: .65rem; color: var(--muted); }
.notify-list { display: flex; flex-direction: column; }
.notify-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.notify-row > div { display: flex; flex-direction: column; gap: 2px; }
.notify-row b { font-size: .81rem; }
.notify-row small { font-size: .67rem; color: var(--muted); line-height: 1.5; }
.about-text { font-size: .83rem; color: var(--muted); line-height: 1.85; }
.about-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.about-grid > div { background: #FBF7F1; border-radius: 10px; padding: 10px; text-align: center; }
.about-grid b { display: block; font-size: 1.1rem; color: var(--brand); }
.about-grid small { font-size: .6rem; color: var(--muted); }
.about-links { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.about-links a { display: flex; justify-content: space-between; align-items: center; font-size: .77rem; padding: 8px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.demo-banner { display: flex; gap: 6px; background: #FBF3E3; border: 1px solid #F0E2C2; border-radius: 10px; padding: 10px 12px; font-size: .69rem; color: #8C732F; line-height: 1.6; }
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.hi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; margin-top: 6px; }
.history-item > div { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.history-item b { font-size: .75rem; }
.history-item small { font-size: .64rem; color: var(--muted); }
.hi-scope { font-size: .61rem; color: var(--muted-2); flex: none; }
.sos-modal { text-align: center; }
.sos-ic { width: 76px; height: 76px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); display: grid; place-items: center; margin: 0 auto 12px; }
.sos-modal h2 { font-size: 1.38rem; }
.sos-modal > p { font-size: .82rem; color: var(--muted); line-height: 1.7; margin: 5px auto 16px; max-width: 400px; }
.sos-calls { display: grid; gap: 8px; text-align: left; }
.sos-call { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; }
.sos-call > span:first-child { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: .66rem; font-weight: 700; flex: none; }
.sos-call.red > span:first-child { background: var(--danger-soft); color: var(--danger); }
.sos-call.blue > span:first-child { background: var(--blue-soft); color: var(--blue); }
.sos-call.green > span:first-child { background: var(--green-soft); color: var(--green); }
.sos-call > div { display: flex; flex-direction: column; flex: 1; }
.sos-call b { font-size: .79rem; }
.sos-call small { font-size: .63rem; color: var(--muted); }
.sos-loc { display: flex; gap: 5px; justify-content: center; font-size: .69rem; color: var(--muted); margin: 12px 0; }
.chat-modal { display: flex; flex-direction: column; height: 520px; max-height: 70vh; }
.chat-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--line); position: relative; }
.chat-avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.chat-head > div { display: flex; flex-direction: column; line-height: 1.3; }
.chat-head b { font-size: .81rem; }
.chat-head small { font-size: .63rem; color: var(--muted); }
.chat-online { width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-left: auto; box-shadow: 0 0 0 3px var(--green-soft); }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { display: flex; }
.chat-msg > span { background: #F4EEE6; border-radius: 12px 12px 12px 3px; padding: 8px 12px; font-size: .77rem; max-width: 82%; line-height: 1.6; }
.chat-msg.me { justify-content: flex-end; }
.chat-msg.me > span { background: var(--brand); color: #fff; border-radius: 12px 12px 3px 12px; }
.chat-input-row { display: flex; gap: 7px; padding-top: 9px; border-top: 1px solid var(--line); }
.chat-input-row input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: .81rem; outline: 0; background: #FBF7F1; }
.chat-input-row .btn { flex: none; }
.chat-quick { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.chat-quick button { font-size: .65rem; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; color: var(--muted); }
.chat-quick button:hover { border-color: var(--brand); color: var(--brand); }
.staff-card { display: flex; align-items: center; gap: 10px; background: #FBF7F1; border-radius: 11px; padding: 10px; }
.staff-card > div { display: flex; flex-direction: column; flex: 1; }
.staff-card b { font-size: .81rem; }
.staff-card small { font-size: .67rem; color: var(--muted); }
.staff-online { font-size: .6rem; color: var(--green); background: var(--green-soft); padding: 2px 6px; border-radius: 999px; display: flex; align-items: center; gap: 3px; }
.contact-provider-card { display: flex; align-items: center; gap: 10px; background: #FBF7F1; border-radius: 11px; padding: 12px; }
.cp-logo { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--brand); display: grid; place-items: center; flex: none; }
.contact-provider-card > div { display: flex; flex-direction: column; }
.contact-provider-card b { font-size: .81rem; }
.contact-provider-card small { font-size: .67rem; color: var(--muted); }
.post-img-picker > span { font-size: .77rem; font-weight: 600; display: block; margin: 10px 0 6px; }
.pip-row { display: flex; gap: 7px; }
.pip-item { width: 78px; height: 58px; border-radius: 9px; overflow: hidden; border: 2px solid transparent; opacity: .66; }
.pip-item.selected { border-color: var(--brand); opacity: 1; }
.pip-item img { width: 100%; height: 100%; object-fit: cover; }
.comment-list { display: flex; flex-direction: column; gap: 9px; max-height: 240px; overflow-y: auto; margin-bottom: 10px; }
.comment-item { display: flex; gap: 8px; }
.comment-item > div { background: #FBF7F1; border-radius: 0 10px 10px 10px; padding: 7px 10px; flex: 1; }
.comment-item b { font-size: .69rem; }
.comment-item p { font-size: .75rem; color: var(--ink-2); line-height: 1.6; }
.empty-comment { font-size: .75rem; color: var(--muted); text-align: center; padding: 14px; }
.comment-input { display: flex; gap: 7px; }
.comment-input input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: .81rem; outline: 0; background: #FBF7F1; }

.activity-modal { display: grid; grid-template-columns: 1fr 1.04fr; gap: 20px; }
.am-media { position: relative; border-radius: 16px; overflow: hidden; min-height: 320px; }
.am-media img { width: 100%; height: 100%; object-fit: cover; }
.am-body h2 { font-size: 1.32rem; line-height: 1.35; margin: 6px 0 10px; }
.am-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #FBF7F1; border-radius: 11px; padding: 11px; margin-bottom: 10px; }
.am-meta > div { display: flex; gap: 6px; font-size: .74rem; align-items: flex-start; }
.am-meta .icon { color: var(--brand); margin-top: 2px; flex: none; }
.am-meta span { display: flex; flex-direction: column; line-height: 1.35; }
.am-meta small { font-size: .58rem; color: var(--muted-2); }
.am-meta b { font-size: .69rem; }
.am-desc { font-size: .79rem; color: var(--ink-2); line-height: 1.8; }
.am-teacher { font-size: .73rem; color: var(--green); background: var(--green-soft); border-radius: 8px; padding: 7px 9px; display: flex; gap: 5px; margin-top: 8px; }
.am-rules { margin-top: 9px; font-size: .73rem; color: var(--muted); line-height: 1.65; }
.am-rules b { font-size: .77rem; color: var(--ink); }
.am-rules p { margin-top: 2px; }
.am-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; flex-wrap: wrap; }
.am-price { flex: 1; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.am-price strong { font-size: 1.55rem; color: var(--brand); }
.am-price small { font-size: .68rem; color: var(--muted); }
.am-progress { width: 86px; height: 4px; background: #EFE7DD; border-radius: 99px; display: inline-block; overflow: hidden; }
.am-progress i { display: block; height: 100%; background: var(--gold); }
.am-foot .btn { flex: none; }

/* ---------------- 響應式 ---------------- */
@media (max-width: 1180px) {
  .parent-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .family-layout { grid-template-columns: minmax(0, 1fr) 310px; }
}
@media (max-width: 980px) {
  .community-layout { grid-template-columns: 1fr; }
  .community-aside { position: static; grid-template-columns: 1fr 1fr; }
  .messages-layout { grid-template-columns: 1fr; }
  .messages-aside { grid-template-columns: 1fr 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-aside { position: static; grid-template-columns: 1fr 1fr; }
  .family-hero { grid-template-columns: 1fr; padding: 30px; }
  .fh-media { height: 250px; }
  .family-layout { grid-template-columns: 1fr; }
  .family-aside { position: static; grid-template-columns: 1fr 1fr; }
  .health-layout { grid-template-columns: 1fr; }
  .health-aside { position: static; grid-template-columns: 1fr 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .order-detail-layout { grid-template-columns: 1fr; }
  .order-detail-aside { position: static; grid-template-columns: 1fr 1fr; }
  .help-layout { grid-template-columns: 1fr; }
  .help-aside { position: static; grid-template-columns: 1fr 1fr; }
  .product-modal, .activity-modal { grid-template-columns: 1fr; }
  .pm-media { min-height: 240px; max-height: 320px; }
  .am-media { min-height: 240px; max-height: 300px; }
}
@media (max-width: 640px) {
  .community-aside { grid-template-columns: 1fr; }
  .composer { padding: 11px 13px; }
  .composer-input { font-size: .78rem; padding: 9px 13px; }
  .post-card { padding: 14px; border-radius: 15px; }
  .post-text { font-size: .83rem; }
  .post-actions { gap: 13px; }
  .profile-hero { padding: 20px; border-radius: 20px; }
  .profile-id { gap: 12px; }
  .profile-copy h1 { font-size: 1.4rem; }
  .profile-actions { width: 100%; }
  .profile-actions .btn { flex: 1; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .order-shortcuts { padding: 14px; }
  .os-grid { gap: 2px; }
  .os-ic { width: 40px; height: 40px; }
  .menu-row { padding: 11px 14px; }
  .menu-card h3 { padding: 12px 14px 4px; }
  .profile-aside { grid-template-columns: 1fr; }
  .family-hero { padding: 24px 20px; border-radius: 22px; }
  .fh-copy h1 { font-size: 1.75rem; }
  .fh-actions .btn { flex: 1; font-size: .82rem; padding: 10px 12px; }
  .fh-stats > div { padding: 0 13px; }
  .fh-stats b { font-size: 1.15rem; }
  .fh-media { height: 205px; }
  .parent-grid { grid-template-columns: 1fr; gap: 11px; }
  .add-parent-card { min-height: 150px; }
  .family-aside { grid-template-columns: 1fr; }
  .timeline-card, .plans-card, .authz-card, .members-card, .reminders-card { padding: 15px; }
  .tl-item:not(:last-child)::after { left: 57px; }
  .tl-time { width: 41px; font-size: .62rem; }
  .authz-owner { display: none; }
  .member-item { min-width: 130px; }
  .health-lock { padding: 28px 18px; margin: 20px auto; }
  .metric-grid { gap: 8px; }
  .metric-card { padding: 12px; }
  .metric-value { font-size: 1.45rem; }
  .chart-card, .meds-card, .records-card { padding: 15px; }
  .health-aside { grid-template-columns: 1fr; }
  .subject-switch-note { display: none; }
  .orders-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .orders-toolbar { padding: 0 12px; }
  .order-tabs .tab-btn { padding: 12px 8px; font-size: .72rem; }
  .order-tabs .tab-btn span { display: none; }
  .oc-main { padding: 12px; gap: 10px; }
  .oc-thumb { width: 74px; height: 62px; }
  .oc-amount strong { font-size: .96rem; }
  .oc-foot { padding: 8px 12px 11px; }
  .oc-foot .btn { flex: 1; }
  .oc-type small { display: none; }
  .order-status-hero { padding: 16px; }
  .osh-copy { min-width: 0; flex-basis: calc(100% - 74px); }
  .osh-copy h1 { font-size: 1.35rem; }
  .osh-amount { text-align: left; margin-left: 74px; }
  .osh-actions .btn { flex: 1; }
  .order-detail-aside { grid-template-columns: 1fr; }
  .order-product { gap: 10px; }
  .op-img { width: 84px; height: 68px; }
  .order-people { grid-template-columns: 1fr 1fr; gap: 7px; }
  .rule-grid { grid-template-columns: 1fr; }
  .progress-time { font-size: .58rem; max-width: 74px; }
  .coupon-grid { grid-template-columns: 1fr; }
  .coupon-amount { width: 112px; }
  .coupon-info { padding: 11px; }
  .coupon-action { padding-right: 10px; }
  .help-contact-grid { grid-template-columns: 1fr; gap: 10px; }
  .help-aside { grid-template-columns: 1fr; }
  .hg-grid { grid-template-columns: 1fr; }
  .messages-aside { grid-template-columns: 1fr; }
  .msg-row { padding: 13px 14px; }
  .msg-title b { font-size: .81rem; }
  .city-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .chat-modal { height: 70vh; }
  .am-meta { grid-template-columns: 1fr; }
  .am-media { min-height: 190px; max-height: 220px; }
  .pm-media { min-height: 200px; }
  .coupon-info b { font-size: .81rem; }
  .help-contact { padding: 18px; }
}