:root { --navy: #0d2b5e; --blue: #1e4fa3; --orange: #ff8a00; --muted: #6b7890; --line: #e8edf4; }
* { box-sizing: border-box; }
body { margin: 0; background: #eaf0f7; color: var(--navy); font-family: 'PingFang TC', 'Noto Sans TC', sans-serif; font-size: 15px; line-height: 1.6; }
button { color: inherit; font: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
button:hover { filter: brightness(.98); }
svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app { width: 100%; max-width: 430px; margin: 0 auto; min-height: 100dvh; background: #f5f7fb; box-shadow: 0 15px 80px #17376313; }
.app-header { height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: white; }
.logo { position: relative; width: 156px; aspect-ratio: 1190 / 455; overflow: hidden; }
.logo img { position: absolute; width: 105.378%; height: auto; left: -2.941%; top: -82.418%; }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; background: #f5f7fb; border-radius: 50%; }
.notification { position: relative; }
.notification i { position: absolute; right: 11px; top: 9px; width: 6px; height: 6px; background: var(--orange); border: 2px solid white; box-sizing: content-box; border-radius: 50%; }
main { padding: 0 22px 108px; }
.welcome { background: #fff; margin: 0 -22px; padding: 16px 24px 24px; border-radius: 0 0 28px 28px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
p, h2, h3, h4 { margin: 0; }
.eyebrow { font-size: 12px; letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; }
h2 { font-size: 29px; letter-spacing: -.04em; line-height: 1.45; }
.wave { color: #ffad3d; font-size: 25px; margin-left: 7px; }
.muted { color: var(--muted); font-size: 13px; }
.avatar { flex-shrink: 0; width: 54px; height: 54px; border: 4px solid #f2f5fa; border-radius: 50%; background: #e2eaf6; display: grid; place-items: center; font-size: 21px; font-weight: 600; position: relative; }
.avatar span { position: absolute; right: -5px; bottom: -4px; background: var(--blue); color: white; border: 3px solid white; font-size: 10px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
.stats button { background: none; display: grid; gap: 0; border-right: 1px solid var(--line); }
.stats button:last-child { border: 0; }
.stats strong { font-size: 27px; line-height: 1.35; font-weight: 650; position: relative; }
.stats span { font-size: 12px; color: var(--muted); margin-top: 5px; }
.orange { color: #bb6200; }
.stats i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); vertical-align: top; margin: 6px 0 0 3px; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 23px 0 28px; }
.quick { display: flex; align-items: center; gap: 9px; border: 1px solid #dce4ef; background: white; padding: 17px 12px; border-radius: 16px; text-align: left; }
.quick.primary { background: var(--orange); border-color: var(--orange); }
.quick b { font-size: 17px; }
.quick small { display: block; font-size: 10px; margin-top: 2px; white-space: nowrap; }
.quick > span:last-child:not(:nth-child(2)) { margin-left: auto; }
.quick-icon svg { width: 21px; height: 21px; display: block; }
.section { margin-top: 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 4px; margin-bottom: 10px; }
h3 { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.count { font-size: 10px; color: #985600; background: #fff0d8; border-radius: 5px; padding: 3px 6px; margin-left: 8px; vertical-align: middle; font-weight: 500; }
.tiny { font-size: 11px; color: var(--muted); }
.card { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 4px 12px #0d2b5e03; }
.pending { border-top: 3px solid #ffb348; }
.status { font-size: 11px; color: #9e5500; font-weight: 600; }
.status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 5px; }
h4 { font-size: 17px; font-weight: 650; line-height: 1.5; margin: 11px 0 4px; }
.case-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 13px; gap: 8px; }
.person { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.person .tiny { display: block; font-size: 10px; }
.mini-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #edf1f7; }
.text-link { font-size: 12px; font-weight: 600; }
.text-link > span { margin-left: 8px; }
.text-button { background: none; min-height: 44px; padding: 0 2px 0 10px; font-size: 12px; color: var(--blue); }
.recommendations .section-heading { margin-bottom: 0; }
.section-description { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.task-list { display: grid; gap: 12px; }
.category { color: var(--blue); background: #eef3fc; font-size: 11px; border-radius: 5px; padding: 3px 8px; }
.task-description { color: var(--muted); font-size: 12px; }
.budget { display: block; font-size: 23px; letter-spacing: -.03em; margin: 13px 0; font-weight: 650; }
.task-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 11px; font-size: 12px; }
.verified { color: var(--blue); font-size: 10px; margin-left: 5px; }
.trust { display: flex; align-items: center; gap: 15px; margin-top: 24px; background: #edf2f9; border-radius: 18px; padding: 18px 16px; }
.trust h3 { font-size: 14px; margin-bottom: 4px; }
.trust p { font-size: 12px; color: #566780; }
.trust .tiny { font-size: 10px; }
.mascot { position: relative; flex-shrink: 0; width: 77px; height: 82px; overflow: hidden; border-radius: 15px; }
.mascot img { position: absolute; width: 645px; height: auto; left: -253px; top: -44px; }
.demo-note { margin-top: 19px; font-size: 10px; text-align: center; color: var(--muted); }
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 9px 10px max(12px, env(safe-area-inset-bottom)); background: #fffffffa; border-top: 1px solid var(--line); z-index: 10; }
.bottom-nav button { background: none; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 5px; color: #7c899e; min-height: 51px; font-size: 10px; }
.bottom-nav .active { color: var(--blue); font-weight: 700; }
.publish-circle { background: var(--orange); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); margin-top: -23px; box-shadow: 0 0 0 5px white; }
.bottom-nav .publish { color: var(--navy); }
.presentation { display: none; }
#toast { position: fixed; z-index: 20; width: calc(100% - 40px); max-width: 380px; left: 50%; transform: translate(-50%, 15px); bottom: 100px; padding: 13px 18px; color: white; background: #0d2b5ef5; border-radius: 12px; font-size: 13px; opacity: 0; pointer-events: none; transition: .2s; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1000px) {
  body { background: radial-gradient(ellipse at 15% 30%, #fff9ef 0, transparent 48%), #eaf0f7; }
  .presentation { display: block; position: fixed; width: calc((100vw - 430px) / 2 - 64px); left: 40px; top: 22vh; max-width: 330px; }
  .edition { font-size: 10px; letter-spacing: .16em; }
  .presentation h1 { font-size: clamp(25px, 2.7vw, 39px); line-height: 1.6; letter-spacing: -.05em; margin: 23px 0 18px; }
  .presentation h1 span { border-bottom: 4px solid var(--orange); }
  .presentation p { font-size: 12px; color: #65738a; }
  .presentation-line { width: 34px; height: 2px; background: var(--orange); margin: 30px 0 20px; }
  .presentation .caption { font-size: 11px; line-height: 2; }
  .version { display: block; font-size: 9px; letter-spacing: .12em; margin-top: 80px; color: #8190a5; }
}
@media (max-width: 374px) { main { padding-right: 18px; padding-left: 18px; } .welcome { margin: 0 -18px; padding-right: 20px; padding-left: 20px; } .quick { padding: 15px 10px; gap: 7px; } .quick-icon { display: none; } .section-heading > .tiny { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* 探索首頁：以會員與服務為核心，案件只保留精簡提醒。 */
.welcome h2 { font-size: 25px; margin-bottom: 7px; }
.explore-search { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 48px; margin-top: 22px; border-radius: 12px; background: #f2f5fa; color: #758199; padding: 12px 14px; font-size: 13px; text-align: left; }
.explore-search svg { width: 19px; height: 19px; }
.case-reminder { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; margin-top: 19px; border: 1px solid #efe4d4; background: #fffaf2; border-radius: 13px; padding: 12px 14px; }
.reminder-dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; flex-shrink: 0; }
.case-reminder b { display: block; font-size: 12px; font-weight: 600; }
.case-reminder small { display: block; font-size: 11px; color: #85745b; }
.reminder-arrow { margin-left: auto; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.category-grid button { display: flex; flex-direction: column; gap: 9px; align-items: center; background: none; font-size: 11px; padding: 6px 0; }
.category-grid button > span, .category-grid svg { width: 49px; height: 49px; background: #eaf0f9; border-radius: 15px; display: grid; place-items: center; color: var(--blue); font-size: 26px; }
.category-grid svg { padding: 13px; }
.member-list { display: grid; gap: 12px; }
.member-card { padding: 0; overflow: hidden; }
.member-cover { padding: 21px 22px; position: relative; min-height: 140px; background: #e5ecf5; }
.cover-caption { display: block; font-size: 8px; letter-spacing: .15em; color: #587095; margin-bottom: 9px; }
.member-cover strong { font-size: 23px; line-height: 1.5; letter-spacing: -.04em; position: relative; z-index: 1; }
.cover-shape { position: absolute; right: 17px; bottom: 6px; font-size: 95px; line-height: 1; color: #acbdd6; font-weight: 300; }
.member-body { padding: 17px; }
.member-avatar { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #eae4dc; color: #775f43; font-size: 17px; }
.member-body h4, .member-compact h4 { margin: 0; font-size: 15px; }
.member-body .person { gap: 10px; }
.member-body .person .tiny { font-size: 10px; }
.member-description { margin: 13px 0; font-size: 13px; line-height: 1.8; color: #68758a; }
.member-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.member-tags span { padding: 3px 8px; font-size: 10px; background: #f2f5fa; color: #536b8b; border-radius: 5px; }
.member-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 15px; padding-top: 12px; font-size: 12px; }
.member-compact { display: flex; align-items: center; gap: 11px; padding: 16px; }
.member-compact > span:last-child { margin-left: auto; }
.blue-avatar { color: #476489; background: #e1eaf7; }
.compact-description { font-size: 11px; color: #6b7890; margin-top: 5px; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.service-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 0; overflow: hidden; text-align: left; }
.service-art { position: relative; padding: 16px 13px; min-height: 125px; overflow: hidden; }
.consultation { background: #efe8dd; }
.toolkit { background: #e4ece8; }
.service-art > span { font-size: 7px; letter-spacing: .08em; display: block; margin-bottom: 10px; color: #63716d; }
.service-art strong { display: block; font-size: 18px; line-height: 1.5; position: relative; z-index: 1; }
.service-art i { position: absolute; right: 7px; bottom: 0; font-size: 57px; font-style: normal; color: #c6cdc3; line-height: 1; }
.service-body { padding: 12px; }
.service-body > .tiny { font-size: 9px; }
.service-body h4 { font-size: 14px; margin: 6px 0 3px; }
.service-price { display: block; font-size: 17px; margin: 11px 0; }
.service-cta { display: block; padding-top: 10px; border-top: 1px solid var(--line); color: var(--blue); font-size: 10px; font-weight: 600; }
.purchase-note { color: var(--muted); font-size: 10px; margin-top: 12px; }
.bottom-nav { grid-template-columns: repeat(4, 1fr); }
.app-header { position: sticky; top: 0; z-index: 12; border-bottom: 1px solid var(--line); }
.page-heading { padding: 12px 0 22px; }
.page-heading h2 { font-size: 25px; }
.page-heading .text-button { padding-left: 0; }
.stack { display: grid; gap: 12px; margin: 15px 0 25px; }
.primary-button, .secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 11px; padding: 11px 15px; margin: 5px 0; }
.primary-button { background: var(--orange); color: var(--navy); font-weight: 650; width: 100%; }
.secondary { background: #edf2f9; border: 1px solid #dfe6f0; }
.field { display: block; font-size: 14px; margin: 16px 0; font-weight: 550; }
input, select, textarea { font: inherit; font-size: 16px; min-width: 0; color: var(--navy); border: 1px solid #ccd6e5; border-radius: 9px; background: white; padding: 12px; max-width: 100%; }
.field input,.field select,.field textarea { display: block; width: 100%; margin-top: 7px; min-height: 46px; }
textarea { resize: vertical; }
.field-error { display: block; color: #a13227; font-size: 12px; min-height: 16px; }
[aria-invalid="true"] { border-color: #a13227; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.filter-chips button { background: white; border: 1px solid #dce4ef; min-height: 44px; padding: 8px 12px; border-radius: 20px; font-size: 12px; }
.filter-chips .selected,.segmented .selected { background: var(--navy); color: white; }
.empty-state { text-align: center; padding: 28px 15px; color: var(--muted); background: white; border-radius: 16px; }
.empty-state .mascot,.success-state .mascot { margin: 0 auto 14px; }
.detail-copy { margin: 20px 0; line-height: 1.9; }
.contact-line { margin: 18px 0 5px; font-size: 14px; }
.section-title { margin: 24px 0 12px; }
.profile-stats { display: grid; grid-template-columns: repeat(3,1fr); text-align: center; margin: 12px 0; }
.profile-stats strong { display: block; font-size: 23px; }
.profile-stats span { font-size: 12px; color: var(--muted); }
.demo-label { background: #fff2d9; color: #805000; border-radius: 7px; padding: 7px 10px; font-size: 12px; margin: 12px 0; }
.action-stack,.menu-list { display: grid; gap: 8px; margin: 20px 0; }
.detail-section { margin-top: 16px; }
.detail-section p { margin: 15px 0; white-space: pre-line; overflow-wrap: anywhere; }
.button-row { display: flex; gap: 8px; margin: 15px 0; }
.button-row > * { flex: 1; }
.sticky-action { position: sticky; bottom: 82px; background: #f5f7fbf5; padding: 8px 0; margin-top: 18px; }
.steps { display: flex; gap: 10px; font-size: 12px; margin-bottom: 15px; }
.steps span { flex: 1; padding: 12px 2px; border-bottom: 3px solid #dce4ef; }
.steps .current { border-color: var(--orange); font-weight: 650; }
.segmented { display: flex; gap: 4px; background: #e8eef6; padding: 5px; border-radius: 12px; }
.segmented button { flex: 1; padding: 12px; border-radius: 9px; background: transparent; }
.timeline { padding-left: 22px; border-left: 2px solid #dce4ef; margin-left: 10px; list-style: none; }
.timeline li { margin: 17px 0; font-size: 13px; overflow-wrap: anywhere; }
.chat-bubble { padding: 12px; background: #edf2f9; border-radius: 12px; }
.own-message { background: #fff0da; }
.money-summary > div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); gap: 8px; }
.money-summary dd { margin: 0; font-weight: 650; }
dialog { width: calc(100% - 32px); max-width: 398px; max-height: 85dvh; overflow-y: auto; border: 0; border-radius: 20px; padding: 22px; color: var(--navy); box-shadow: 0 20px 100px #0d2b5e33; }
dialog::backdrop { background: #0d234d77; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 15px; }
dialog p { margin: 12px 0; }
dialog .secondary { margin-right: 5px; }
.attachment-preview { display: grid; place-items: center; min-height: 160px; background: #edf2f9; font-size: 65px; }
.success-state { text-align: center; padding: 30px 5px; }
.success-state p { margin: 20px 0; }
.success-check { background: #e6f2e9; color: #237340; width: 75px; height: 75px; border-radius: 50%; margin: 15px auto; display: grid; place-items: center; font-size: 40px; animation: pop .4s ease; }
@keyframes pop { from { transform: scale(.7); opacity: .3; } to { transform: scale(1); opacity: 1; } }
fieldset { border: 1px solid #dce4ef; border-radius: 10px; margin: 15px 0; padding: 10px; }
.star-options { display: flex; flex-wrap: wrap; }
.star-options label,.check-label { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 5px; font-size: 13px; }
.card h2 { font-size: 23px; margin-top: 10px; }
.card { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .success-check { animation: none; } }
.chevron { display: inline-block; width: 8px; height: 8px; border-top: 1.8px solid currentColor; border-right: 1.8px solid currentColor; vertical-align: 1px; flex-shrink: 0; }
.chevron-right { transform: rotate(45deg); margin: 0 3px 0 5px; }
.chevron-left { transform: rotate(-135deg); }
.header-back { display: flex; align-items: center; gap: 8px; min-width: 62px; min-height: 44px; padding: 10px 4px; background: none; color: var(--blue); font-size: 15px; }
.header-back .chevron { width: 11px; height: 11px; }
.app-header.has-back { padding-left: 18px; gap: 10px; }
.app-header.has-back .logo { width: 126px; }
/* 以行動橘與共好黃增加探索頁的溫暖層次。 */
:root { --yellow: #ffc24b; }
.category-grid button:nth-child(1) > span { background: #fff0d9; color: #a95600; }
.category-grid button:nth-child(2) > span { background: #fff5d7; color: var(--navy); }
.category-grid button:nth-child(4) > span { background: #ffedb8; color: var(--navy); }
.member-cover { background: linear-gradient(115deg, #e5ecf5 65%, #fff1ce); }
.cover-shape { color: #efb94e; }
.consultation { background: #fff0d9; }
.consultation i { color: #e9a345; }
.toolkit { background: #fff3cc; }
.toolkit i { color: #e4b849; }
.trust { background: linear-gradient(110deg, #fff3d4, #fff9ec); border: 1px solid #f4dfad; }
.count { background: var(--yellow); color: var(--navy); }
.service-cta { border-top-color: #f0e2c9; }
.review-stars { color: #a65b00; font-size: 28px; letter-spacing: 4px; }
.welcome-mascot { width: 62px; height: 68px; border-radius: 16px; }
.welcome-mascot img { width: 530px; left: -208px; top: -36px; }
.welcome-companion { flex: 0 0 82px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.welcome-greeting { position: relative; background: #fff1c9; border-radius: 10px; padding: 5px 7px; font-size: 10px; text-align: center; line-height: 1.5; }
.welcome-greeting::after { content: ''; position: absolute; bottom: -4px; left: 50%; width: 8px; height: 8px; background: #fff1c9; transform: rotate(45deg); }
.greeting-mascot { width: 61px; height: 59px; border-radius: 12px; }
.greeting-mascot img { width: 460.8px; top: -30px; left: -180px; }
.greeting-mascot[data-expression="1"] img { left: -250px; }
.greeting-mascot[data-expression="2"] img { left: -321px; }
.welcome:has(.welcome-companion) h2 { font-size: 23px; }
@media (max-width: 374px) { .welcome-companion { flex-basis: 70px; } .welcome:has(.welcome-companion) h2 { font-size: 21px; } }
.trust { display: grid; grid-template-columns: 77px minmax(0, 1fr); gap: 18px; padding: 20px; align-items: center; }
.trust > div:last-child { min-width: 0; }
.trust h3 { font-size: 16px; line-height: 1.5; margin-bottom: 7px; }
.trust p { font-size: 13px; line-height: 1.8; }
.trust .tiny { display: block; margin-top: 7px; }
@media (max-width: 374px) { .trust { gap: 13px; padding: 16px; } .trust h3 { font-size: 15px; } }
/* 對話框向左上延伸，讓問候文字保持易讀。 */
.welcome-companion { position: relative; flex: 0 0 94px; min-height: 110px; align-items: flex-end; justify-content: flex-end; }
.welcome-greeting { position: absolute; top: 0; right: 12px; width: 118px; padding: 8px 10px; font-size: 14px; line-height: 1.45; border-radius: 13px; box-shadow: 0 2px 6px #9a69000a; }
.welcome-greeting::after { left: auto; right: 17px; bottom: -5px; width: 10px; height: 10px; }
.welcome > .row > div:first-child { min-width: 0; padding-right: 16px; }
@media (max-width: 374px) { .welcome-companion { flex-basis: 80px; } .welcome-greeting { right: 4px; width: 108px; } .welcome > .row > div:first-child { padding-right: 20px; } }
.my-profile { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 20px; margin-top: 22px; }
.my-profile .person { gap: 12px; min-width: 0; }
.my-profile .person > div { min-width: 0; overflow-wrap: anywhere; }
.my-profile h2 { font-size: 23px; }
.my-profile .member-avatar { width: 48px; height: 48px; background: #fff0d0; }
.profile-edit { min-height: 44px; padding: 8px 12px; background: #eef3fa; color: var(--blue); border-radius: 10px; font-size: 12px; flex-shrink: 0; }
.my-expertise { font-size: 13px; color: var(--muted); margin-top: 18px; }
.my-stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 20px 0 15px; text-align: center; }
.my-stats > div + div { border-left: 1px solid var(--line); }
.my-stats strong { display: block; font-size: 24px; }
.my-stats span { color: var(--muted); font-size: 11px; }
.my-profile > .tiny { font-size: 9px; text-align: center; }
.profile-preview { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border-top: 1px solid var(--line); margin-top: 16px; padding: 15px 0 0; min-height: 44px; font-size: 13px; color: var(--blue); }
.my-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.my-shortcuts button { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-align: left; }
.shortcut-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff0d9; font-size: 23px; margin-bottom: 12px; }
.my-shortcuts button:nth-child(2) .shortcut-icon { background: #fff3c9; }
.my-shortcuts strong { display: block; font-size: 15px; }
.my-shortcuts small { color: var(--muted); font-size: 11px; }
.settings-group { border: 1px solid var(--line); background: white; border-radius: 16px; overflow: hidden; }
.settings-row { display: flex; justify-content: space-between; align-items: center; width: 100%; background: white; padding: 16px 18px; min-height: 54px; font-size: 14px; text-align: left; }
.settings-row + .settings-row { border-top: 1px solid var(--line); }
.support-links { display: flex; border-top: 1px solid var(--line); }
.support-links button { flex: 1; }
.demo-settings { margin-top: 25px; color: var(--muted); font-size: 12px; }
.demo-settings summary { min-height: 44px; cursor: pointer; padding: 12px 0; }
.category-grid { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 0 10px; scrollbar-width: thin; scrollbar-color: #cbd8eb transparent; }
.category-grid button { flex: 0 0 70px; scroll-snap-align: start; }
.category-grid button > span, .category-grid button:nth-child(1) > span, .category-grid button:nth-child(2) > span, .category-grid button:nth-child(4) > span, .category-grid svg { background: #eaf0f9; color: var(--blue); }
.section > .profile-preview { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 12px; }
.member-avatar { overflow: hidden; }
.member-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
#avatar-preview .member-avatar { width: 76px; height: 76px; margin: 10px auto; font-size: 26px; }
button:disabled { opacity: .5; cursor: wait; }
.points-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 18px 20px; margin-top: 16px; border: 1px solid #f1dcab; border-radius: 17px; background: #fff5dc; text-align: left; }
.points-card strong { display: block; font-size: 29px; line-height: 1.4; }
.points-card strong small { font-size: 13px; font-weight: 500; }
.points-note { font-size: 10px; color: #80683c; }
.points-record { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.category-scroll-controls { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 2px; }
.category-scroll-controls > div { display: flex; gap: 5px; }
.category-scroll-controls button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #eaf0f9; color: var(--blue); }
.category-scroll-controls button .chevron { margin: 0; }
.category-scroll-controls button:disabled { opacity: .3; cursor: default; }
main:not([data-page="cart"]):has(.page-heading) { animation: page-enter .18s ease-out; }
@keyframes page-enter { from { opacity: .6; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { main:not([data-page="cart"]):has(.page-heading) { animation: none; } }
.profile-preview { font-size: 14px; font-weight: 400; color: var(--navy); }
.preview-only:disabled { opacity: 1; cursor: default; filter: none; }
.discount-tag { background: var(--yellow); color: var(--navy); border: 1px solid #f3b237; font-weight: 650; }
.income-tag { background: #e4efff; color: #174b91; border: 1px solid #bed3ef; }
.expense-tag { background: #fff0d3; color: #895100; border: 1px solid #efd092; }
.bottom-nav { grid-template-columns: repeat(5, 1fr); }
.task-list-amount { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.payment-card { margin-top: 24px; }

/* 會員形象照與服務圖文區塊 */
.profile-hero{aspect-ratio:1;overflow:hidden;border-radius:20px;background:#e9f3fb;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:20px;color:var(--navy,#18354b);font-size:32px;gap:12px}
.profile-hero small{font-size:15px}
.profile-hero img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-edit-preview{width:180px;max-width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.content-block{border:1px solid #dce6ed;border-radius:12px;padding:12px;margin:12px 0}
.content-block .row{flex-wrap:wrap;gap:8px}.content-block button{padding:8px;font:inherit}
.block-image-preview,.offer-rich-content img{display:block;max-width:100%;height:auto;border-radius:12px}
.offer-rich-content figure{margin:18px 0}.offer-rich-content .detail-copy{white-space:pre-wrap;overflow-wrap:anywhere}

.discount-tag { display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px; }
.discount-points { color:#b42318;font-size:28px;font-weight:800;line-height:1.2; }

.order-list-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 16px;flex-wrap:wrap; }
.order-list-toolbar h3 { margin:0; }
.order-list-toolbar .primary-button { width:auto;margin:0;padding:10px 14px;font-size:14px;min-height:44px; }

.task-chat-entry{display:block;width:100%;text-align:left;font:inherit}.task-chat-entry h3{margin:0}.chat-last{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-chat-messages{display:flex;flex-direction:column;gap:14px;margin:20px 0}.chat-message{max-width:88%;align-self:flex-start;background:#edf3f8;border-radius:14px;padding:12px;overflow-wrap:anywhere}.chat-message.own-message{align-self:flex-end;background:#deefff}.chat-message p{white-space:pre-wrap;margin:8px 0 0}.chat-compose{margin-top:24px}

.member-compact>div{min-width:0}.member-card-expertise{font-size:14px;line-height:1.5;margin:8px 0;overflow-wrap:anywhere}.member-card-expertise span{display:block;font-size:12px;color:#526577;margin-bottom:2px}.member-card-bio{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.6;color:#526577;margin:6px 0 10px;overflow-wrap:anywhere}.member-profile-fields h3{font-size:15px;margin:20px 0 6px}.member-profile-fields .detail-copy{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px}

.member-chat-thread{min-height:40vh;padding-bottom:16px}.member-chat-compose{position:sticky;bottom:76px;display:flex;align-items:flex-end;gap:10px;background:#fff;padding:12px;border:1px solid #dce6ed;border-radius:16px;z-index:3}.member-chat-compose .field{flex:1;min-width:0;margin:0}.member-chat-compose textarea{min-height:48px;height:64px;resize:vertical}.member-chat-compose .primary-button{width:auto;min-width:64px;margin:0}.member-chat-thread .chat-message{max-width:85%}

.faq-list{display:grid;gap:12px}.faq-item{background:#fff;border:1px solid #dce6ed;border-radius:14px;overflow:hidden}.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:16px;cursor:pointer;list-style:none;font-weight:600;line-height:1.5}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:focus-visible{outline:2px solid var(--blue,#2674a8);outline-offset:-3px}.faq-toggle{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);flex-shrink:0;margin-right:4px}.faq-item[open] .faq-toggle{transform:rotate(225deg)}.faq-item>p{margin:0;padding:0 16px 16px;color:#526577;line-height:1.8;overflow-wrap:anywhere}

[hidden]{display:none!important}.membership-notice{background:#eaf4fb;border:1px solid #cbdfea;padding:16px;border-radius:14px;margin:16px 0}.membership-notice p{font-size:14px;line-height:1.6}.membership-notice .primary-button{width:auto} form[data-form="join"]{margin-top:20px}

.join-welcome{text-align:center;padding:24px 12px 18px;margin-bottom:8px}.join-welcome .mascot{margin:0 auto 12px}.join-slogan{font-size:25px;font-weight:750;line-height:1.45;margin:0 0 10px}.join-slogan span{color:var(--blue,#2674a8)}.join-tagline{font-size:14px;line-height:1.6;margin:0;color:#526577}

.membership-dialog{text-align:center}.membership-dialog .mascot{margin:8px auto 16px}.membership-dialog p{line-height:1.7}

.membership-conversation{display:flex;align-items:center;gap:16px;margin:12px 0 24px}.membership-conversation.mascot-right{flex-direction:row-reverse}.membership-conversation .mascot{margin:0}.membership-bubble{position:relative;background:#eaf4fb;border-radius:16px;padding:14px;margin:0;text-align:left;flex:1;min-width:0;font-size:16px;overflow-wrap:anywhere}.membership-bubble:before{content:"";position:absolute;left:-8px;top:calc(50% - 8px);border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:9px solid #eaf4fb}.mascot-right .membership-bubble:before{left:auto;right:-8px;border-right:0;border-left:9px solid #eaf4fb}

.membership-notice{display:flex;align-items:center;gap:14px}.membership-notice-copy{flex:1;min-width:0}.membership-notice .mascot{margin:0}.membership-notice-copy p{overflow-wrap:anywhere}@media(max-width:374px){.membership-notice{gap:10px;padding:12px}.membership-notice .mascot{width:61px;height:59px}.membership-notice .mascot img{width:460.8px;left:-180px;top:-30px}}
.floating-cart{position:fixed;right:20px;bottom:90px;z-index:8;border:0;border-radius:28px;padding:13px 18px;background:var(--orange);color:#102d49;box-shadow:0 4px 18px #17334a26;font-weight:700}.floating-cart strong{background:#fff;border-radius:50%;padding:3px 7px;margin-left:6px}main{padding-bottom:170px}.cart-line{border-bottom:1px solid #dce6ed;padding:12px 0}.cart-line .button-row{align-items:center}.cart-seller{padding-bottom:20px}.order-lines{display:grid;gap:12px;margin:16px 0}.order-lines h4{overflow-wrap:anywhere}.order-lines .card{min-width:0}dialog:open~.floating-cart{display:none}
.floating-cart{right:max(16px,calc((100vw - 430px)/2 + 16px))}
.floating-cart{width:68px;height:68px;padding:5px;background:white;border:2px solid var(--orange);border-radius:18px}.floating-cart img{display:block;width:54px;height:54px;object-fit:contain}.floating-cart strong{position:absolute;right:-5px;top:-8px;margin:0;min-width:24px;background:var(--orange);color:var(--navy);line-height:24px;padding:0 5px;border:2px solid white;font-size:12px}

/* 購物車：商品資訊為主，操作控制保持輕量。 */
.cart-group-count{font-size:12px;color:var(--muted);margin:-10px 0 18px}
.cart-seller{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;padding:0;margin-bottom:20px}
.cart-seller-heading{display:flex;align-items:center;gap:10px;padding:16px;background:#f5f8fc;border-bottom:1px solid var(--line)}
.cart-seller-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#e7eef9;color:var(--blue);font-size:15px;font-weight:600;flex-shrink:0}
.cart-eyebrow{font-size:10px;color:var(--muted)}
.cart-seller-heading h3{font-size:14px;margin:3px 0 0}
.cart-item-count{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.cart-line{margin:0 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-item-heading{display:flex;align-items:flex-start;gap:8px}
.cart-item-heading h4{font-size:14px;line-height:1.6;margin:6px 0 12px;flex:1;min-width:0;overflow-wrap:anywhere}
.cart-remove{display:grid;place-items:center;flex-shrink:0;width:36px;min-height:36px;padding:0;background:transparent;color:#8b96a7;border:0;border-radius:8px}
.cart-remove svg{width:17px;height:17px}.cart-remove:hover{background:#fff1ec;color:#b45132}
.cart-item-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cart-price{display:flex;flex-direction:column;gap:4px}.cart-price strong{font-size:15px;font-variant-numeric:tabular-nums}.cart-price>span:not(.cart-quote){font-size:10px;color:var(--muted)}
.cart-quote{font-size:12px;color:var(--blue)}
.cart-quantity{display:flex;align-items:center;border:1px solid #e1e7ef;border-radius:9px;overflow:hidden;height:34px;flex-shrink:0}
.cart-quantity button{width:34px;min-height:34px;border:0;border-radius:0;padding:0;background:#f7f9fc;color:var(--navy);font-size:16px}
.cart-quantity button:disabled{color:#bdc5d1;cursor:default}.cart-quantity span{width:28px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.cart-checkout{padding:16px}.cart-subtotal{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.cart-subtotal>span{font-size:12px;color:var(--muted)}.cart-subtotal strong{font-size:19px;font-variant-numeric:tabular-nums}
.cart-quote-note{font-size:11px;color:var(--muted);line-height:1.6;margin:-4px 0 14px}.cart-checkout .primary-button{width:100%;min-height:42px;font-size:13px;border-radius:11px}

.confirmation-line h4{font-size:14px;line-height:1.6;margin:0 0 12px;overflow-wrap:anywhere}
.confirmation-item-detail{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}
.confirmation-item-detail>span:first-child{color:var(--muted);font-size:11px;line-height:1.7}.confirmation-quantity{display:block;margin-top:3px}
.confirmation-item-detail strong{font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}.confirmation-quote{font-size:11px;color:var(--blue);background:#eef3fc;border-radius:6px;padding:4px 8px;white-space:nowrap}
.confirmation-line~.cart-checkout .cart-subtotal{margin-bottom:0}.confirmation-line~.cart-checkout .cart-quote-note{margin:10px 0 0}
.confirmation-next{padding:16px 18px;border:1px solid #e0e9f6;border-radius:14px;background:#f0f5fc}.confirmation-step{font-size:10px;color:var(--blue);font-weight:600}.confirmation-next h3{font-size:14px;margin:7px 0}.confirmation-next p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}
.confirmation-notes{padding:12px 4px}.confirmation-notes p{font-size:11px;color:var(--muted);line-height:1.7;margin:4px 0}
.confirmation-submit .primary-button{width:100%;min-height:44px;border-radius:11px;font-size:14px}.confirmation-submit>p{font-size:10px;color:var(--muted);text-align:center;margin:10px 0}

.cart-continue{display:block;width:100%;min-height:40px;margin-top:8px;padding:8px;background:transparent;border:0;color:var(--blue);font-size:12px;border-radius:10px}.cart-continue:hover{background:#f0f5fc}

.confirmation-payment{border:0;padding:0;margin:0 0 16px;min-width:0}.confirmation-payment legend{font-size:14px;font-weight:600;margin-bottom:12px}.confirmation-payment label{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px;cursor:pointer}.confirmation-payment label:has(input:checked){border-color:var(--blue);background:#f0f5fc}.confirmation-payment input{width:16px;height:16px;margin:0;accent-color:var(--blue);flex-shrink:0}.confirmation-payment strong{display:block;font-size:13px}.confirmation-payment small{display:block;font-size:11px;line-height:1.6;color:var(--muted);margin-top:4px}

.card-input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card-input-row input{min-width:0}.card-payment-error{color:#b43e32;font-size:12px}.virtual-account{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-weight:600;user-select:all}

.order-payment-summary{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px;font-size:11px;color:var(--muted)}.order-payment-summary .text-link{white-space:nowrap}

.purchase-result{text-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 20px}.purchase-result-icon{display:grid;place-items:center;margin:0 auto 20px;width:56px;height:56px;border-radius:50%;background:#eaf2fc;color:var(--blue);font-size:26px}.purchase-result h2{font-size:20px;line-height:1.5}.purchase-result>p{font-size:13px;color:var(--muted);line-height:1.8;margin:14px 0}.purchase-result .cart-subtotal{margin:24px 0}.purchase-result>.primary-button{display:block;width:100%;margin-top:24px}.purchase-result>.text-button{display:block;width:100%;margin-top:8px}

.order-detail-number{font-size:17px;font-weight:600;line-height:1.6;color:var(--navy);margin:0 0 16px;overflow-wrap:anywhere}

.order-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.order-detail-heading .order-detail-number{font-size:12px;font-weight:500;color:var(--muted);text-align:right;margin:0;max-width:52%}.order-detail-heading h2{flex-shrink:0}

.order-status-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.order-contact{min-height:36px;padding:7px 12px;border:1px solid #dce6f4;border-radius:9px;background:#f0f5fc;color:var(--blue);font-size:12px;white-space:nowrap}

.item-points-label{display:inline-block;margin:0 0 12px;padding:4px 8px;border-radius:6px;background:#fff2cf;color:#985a12;font-size:11px;line-height:1.5;font-weight:500}

.seller-attention{margin:20px 0}.seller-attention-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.seller-attention-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid transparent;border-radius:14px;text-align:left}.attention-quote{background:#fff1dc;color:#8a4f0a}.attention-payment{background:#eaf1fc;color:var(--blue)}.seller-attention-grid button.selected{border-color:currentColor}.seller-attention-grid strong{font-size:26px}.seller-attention-grid small{font-size:11px;font-weight:400}.seller-attention-grid .tiny{font-size:10px}

.pending-welcome{padding:18px 8px 8px;text-align:center}.pending-status{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--blue);letter-spacing:.5px;border:1px solid #dde7f4;background:#fff;border-radius:24px;padding:8px 14px}.pending-status>span{width:6px;height:6px;background:var(--orange);border-radius:50%}
.pending-mascot-scene{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:166px;margin:22px 0 14px}.pending-mascot-scene:before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:#e8f0fc;left:10px;bottom:0;z-index:0}.pending-mascot-scene .pending-mascot{width:115px;height:125px;position:relative;z-index:1;flex-shrink:0}.pending-bubble{position:relative;border:1px solid #e1e9f4;border-radius:17px 17px 17px 4px;padding:16px 13px;background:#fff;box-shadow:0 6px 24px #16396008;text-align:left;font-size:12px;color:var(--muted);align-self:flex-start;margin-top:16px;line-height:1.7}.pending-bubble strong{display:block;font-size:18px;color:var(--navy);margin-top:4px}
.pending-brand-copy{margin:26px 0 30px}.pending-accent{display:block;width:28px;height:3px;border-radius:3px;background:var(--orange);margin:0 auto 20px}.pending-brand-copy h1{font-size:29px;line-height:1.65;letter-spacing:1.2px;font-weight:700;margin:0;color:var(--navy)}.pending-brand-copy h1 span{position:relative;z-index:0}.pending-brand-copy h1 span:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:9px;background:#ffe5a0;z-index:-1;border-radius:2px}.pending-brand-copy>p{font-size:12px;letter-spacing:.5px;line-height:1.8;color:var(--muted);margin:16px 0 0}
.pending-receipt{display:flex;align-items:center;gap:14px;text-align:left;padding:19px 20px;background:#fff;border:1px solid var(--line);border-radius:16px}.pending-check{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;color:var(--blue);background:#edf3fc;font-size:16px}.pending-receipt h2{font-size:14px;margin:0 0 6px}.pending-receipt p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.pending-footnote{font-size:11px;color:var(--muted);line-height:1.8;margin:22px 0 14px}.pending-welcome>.primary-button{width:100%;border-radius:12px;font-size:14px}
.pending-mascot-scene .pending-mascot{height:111px;border-radius:18px;overflow:hidden}.pending-mascot-scene .pending-mascot img{width:869px;max-width:none;left:-339px;top:-57px}