/* laurel-ui.css — 營養食證所前端「共用元件單一來源」。
 * 把原本散在 index.html <style> 內的共用元件抽成一處（改一處＝改全站），
 * 並新增：header/nav/footer、登入態 widget、stat 卡、長條圖(.bar)、甜甜圈(.donut)、
 * 會員 dashboard、auth 卡、分頁表格。
 * 暖色 token 在此以 CSS 變數集中（與各頁 inline tailwind.config 同值，互不衝突）。
 * 字體沿用 Noto Serif/Sans TC（由各頁 <link> 載入）。
 */
:root {
  --bg: #FCFAF8; --surface: #FFFFFF; --ink: #3A322C; --muted: #9A9087; --line: #EFEAE0;
  --accent1: #CA7940; --accent2: #94AF9E; --good: #5C7A4D; --warn: #B5894A; --deep: #573029; --butter: #F6E7C6;
  --serif: "Noto Serif TC", serif;
  --sans: "Noto Sans TC", system-ui, sans-serif;
  --wrap: 72rem;
}

/* ============ 通用容器 ============ */
.lrl-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .lrl-wrap { padding: 0 32px; } }
.img-warm-fallback { background: linear-gradient(135deg, #F5E9DC, #EAD9C6); }

/* ============ 可重用大背景 .bg-photo ============ */
/* 用法:<section class="bg-photo" style="background-image:url(img/planA-hero2.png)">…</section>
 * 內建上下暖色漸層遮罩,白字深字都可讀;內容自動浮在遮罩之上。
 * 注意:圖片務必用 inline background-image(相對路徑對「文件」解析才正確);
 *      勿用 CSS 變數 var(--bg) 帶 url——它會被本 stylesheet 位置誤解析,少掉 laurel-web/ 路徑段。 */
.bg-photo { position: relative; isolation: isolate; background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(40, 28, 20, .48) 0%, rgba(40, 28, 20, .16) 42%, rgba(40, 28, 20, .58) 100%); pointer-events: none; }
.bg-photo--light::before { background: linear-gradient(180deg, rgba(252, 250, 248, .82) 0%, rgba(252, 250, 248, .62) 50%, rgba(252, 250, 248, .9) 100%); }

/* ============ 對話氣泡 ============ */
.bubble { line-height: 1.7; font-size: 16px; position: relative; }
.bubble-bot { background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 22px 22px 22px 6px; padding: 12px 16px; display: inline-block; box-shadow: 0 4px 14px rgba(58, 50, 44, .05); }
.bubble-user { background: rgba(202, 121, 64, .12); color: var(--ink); border: 1px solid rgba(202, 121, 64, .22); border-radius: 22px 22px 6px 22px; padding: 12px 16px; display: inline-block; }
.bubble-greet { background: rgba(148, 175, 158, .18); border: 1px solid rgba(148, 175, 158, .3); }
.bubble-warn { background: rgba(181, 137, 74, .12); border: 1px solid rgba(181, 137, 74, .32); }

/* ============ Pill ============ */
.pill { border-radius: 999px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; cursor: pointer; }
.pill:hover { transform: scale(1.04); }
.eg-chip.is-cur { background: var(--accent1); color: #fff; border-color: var(--accent1); }
.composer-input { transition: box-shadow .2s ease, border-color .2s ease; }
.composer-input:focus { box-shadow: 0 0 0 4px rgba(202, 121, 64, .18); border-color: var(--accent1); }
[data-fval].is-on { background: var(--accent1) !important; color: #fff !important; border-color: var(--accent1) !important; }
.hero-orb { background: radial-gradient(circle at center, rgba(255, 255, 255, 0) 38%, rgba(252, 250, 248, .55) 62%, rgba(252, 250, 248, 1) 80%); }
details.fdrawer summary { list-style: none; } details.fdrawer summary::-webkit-details-marker { display: none; }

/* ============ 通用商品卡 lrl-card ============ */
.lrl-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 6px 20px rgba(58, 50, 44, .06); overflow: hidden; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.lrl-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(58, 50, 44, .14); border-color: rgba(202, 121, 64, .38); }
.lrl-card-media { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, #F5E9DC, #EAD9C6); overflow: hidden; }
.lrl-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.lrl-card:hover .lrl-card-img { transform: scale(1.07); }
.lrl-card:hover .lrl-card-media::after { background: linear-gradient(to top, rgba(40, 28, 20, .58) 0%, rgba(40, 28, 20, .14) 52%, rgba(40, 28, 20, 0) 100%); }
.lrl-card-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; }
/* 暖色漸層遮罩:由下往上 0→.55,讓底部分數/標籤可讀、質感一致 */
.lrl-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 28, 20, .55) 0%, rgba(40, 28, 20, .12) 48%, rgba(40, 28, 20, 0) 100%); pointer-events: none; z-index: 1; }
/* 「示意」小標:生成圖右下角,極小半透明,誠實標示非真品照 */
.lrl-img-tag { position: absolute; right: 8px; bottom: 8px; z-index: 2; background: rgba(40, 28, 20, .42); color: rgba(255, 255, 255, .92); font-size: 9px; line-height: 1; padding: 3px 7px; border-radius: 999px; letter-spacing: .04em; backdrop-filter: blur(2px); pointer-events: none; }
.lrl-clover { position: absolute; top: 8px; right: 8px; z-index: 2; width: 48px; height: 48px; cursor: help; filter: drop-shadow(0 2px 6px rgba(58,50,44,.28)); }
.lrl-clover svg { width: 100%; height: 100%; display: block; }
/* 等級圈章素材圖（tierBadge）：圖=素材白底裁圓、分數=右下白膠囊；容器需 position 定位 */
.tb-img { width: 100%; height: 100%; display: block; border-radius: 50%; background: #fff; }
.tb-n { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 700; font-style: normal; color: var(--ink); box-shadow: 0 1px 4px rgba(58,50,44,.18); line-height: 1; }
.lrl-clover::after { content: "營養五葉評價・非醫療建議"; position: absolute; top: 52px; right: 0; background: var(--deep); color: #fff; font-size: 11px; font-weight: 400; padding: 7px 10px; border-radius: 10px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .18s, transform .18s; z-index: 5; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.lrl-clover:hover::after, .lrl-clover:focus::after { opacity: 1; transform: translateY(0); }
.lrl-score { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--accent1); color: #fff; font-weight: 700; border-radius: 999px; min-width: 38px; height: 38px; display: grid; place-items: center; font-size: 15px; cursor: help; box-shadow: 0 2px 8px rgba(202, 121, 64, .4); border: 2px solid rgba(255, 255, 255, .6); }
.lrl-score::after { content: "評分僅供參考・非醫療建議"; position: absolute; top: 46px; right: 0; background: var(--deep); color: #fff; font-size: 11px; font-weight: 400; padding: 7px 10px; border-radius: 10px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .18s, transform .18s; z-index: 5; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.lrl-score:hover::after, .lrl-score:focus::after { opacity: 1; transform: translateY(0); }
.fav-btn { position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); display: grid; place-items: center; font-size: 16px; color: var(--accent1); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); z-index: 3; line-height: 1; transition: transform .15s, background .15s; }
.fav-btn:hover { transform: scale(1.1); }
.fav-btn.is-fav { background: var(--accent1); color: #fff; border-color: var(--accent1); }
.lrl-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.lrl-cat { color: var(--muted); font-size: 13px; }
.lrl-name { font-size: 17px; margin: 4px 0; color: var(--ink); font-family: var(--serif); font-weight: 600; line-height: 1.4; }
.lrl-meta { color: var(--muted); font-size: 13px; }
.lrl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lrl-tag { background: rgba(148, 175, 158, .16); color: var(--good); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.lrl-flag { display: inline-flex; align-items: center; gap: 4px; background: rgba(181, 137, 74, .14); color: #8a5a2a; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 500; }
.lrl-empty { padding: 26px; color: var(--muted); text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: 16px; grid-column: 1 / -1; line-height: 1.7; }

/* ============ 排名橫列 rank ============ */
.rank-row { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; }
.rank-row::-webkit-scrollbar { height: 8px; } .rank-row::-webkit-scrollbar-thumb { background: #E7DECF; border-radius: 99px; }
.rank-card { scroll-snap-align: start; flex: 0 0 200px; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px rgba(58, 50, 44, .06); transition: transform .2s, box-shadow .2s; }
.rank-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(58, 50, 44, .12); }
.rank-media { position: relative; aspect-ratio: 1/1; } .rank-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rank-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; }
.rank-no { position: absolute; top: -2px; left: 8px; font-family: var(--serif); font-weight: 700; font-size: 46px; line-height: 1; color: #fff; text-shadow: 0 2px 10px rgba(58, 50, 44, .45); }
.rank-badge { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .92); color: var(--deep); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 3px 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.rank-body { padding: 11px 13px 14px; }

/* ============ 五道評測 eval ============ */
.eval-row { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; }
.eval-row::-webkit-scrollbar { height: 8px; } .eval-row::-webkit-scrollbar-thumb { background: #E8D9B6; border-radius: 99px; }
.eval-card { scroll-snap-align: start; flex: 0 0 248px; background: #fff; border: 1px solid #EFE3CB; border-radius: 20px; padding: 16px; box-shadow: 0 8px 24px rgba(151, 116, 52, .10); transition: transform .2s, box-shadow .2s, border-color .2s; }
.eval-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(151, 116, 52, .16); border-color: rgba(202, 121, 64, .35); }
.eval-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.eval-thumb { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; background: linear-gradient(135deg, #F5E9DC, #EAD9C6); display: grid; place-items: center; font-size: 24px; }
.eval-grade { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1; }
.eval-overall { font-size: 12px; color: var(--muted); }
.eval-dims { display: flex; flex-direction: column; gap: 7px; }
.eval-dim { display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; gap: 8px; font-size: 12px; color: #6f6459; }
.eval-track { height: 8px; background: #E7D8BD; border-radius: 99px; overflow: hidden; }
/* fill 平時即顯示分數(width:var(--w));hover 卡片時由 0 重新長出來=互動「增長」感 */
.eval-fill { display: block; height: 100%; border-radius: 99px; min-width: 6px; width: var(--w, 0); }
@keyframes evalGrow { from { width: 0; } to { width: var(--w); } }
.eval-card:hover .eval-fill { animation: evalGrow .7s cubic-bezier(.22,.61,.36,1) both; }
/* 逐條交錯長出:健康度先,其餘依序,呈現「從最少一路增加」 */
.eval-card:hover .eval-dim:nth-child(2) .eval-fill { animation-delay: .08s; }
.eval-card:hover .eval-dim:nth-child(3) .eval-fill { animation-delay: .16s; }
.eval-card:hover .eval-dim:nth-child(4) .eval-fill { animation-delay: .24s; }
.eval-card:hover .eval-dim:nth-child(5) .eval-fill { animation-delay: .32s; }

/* ============ 分類大卡 cat ============ */
.cat-card { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 8px 24px rgba(58, 50, 44, .10); display: block; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .cat-card:hover img { transform: scale(1.05); }
.cat-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 28, 20, 0) 30%, rgba(40, 28, 20, .72) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px; color: #fff; }

/* ============ 小測驗 quiz ============ */
.q-step { color: var(--muted); font-size: 13px; }
.q-q { background: #fff; border: 1px solid var(--line); border-radius: 22px 22px 22px 6px; padding: 13px 16px; display: inline-block; font-size: 17px; line-height: 1.6; box-shadow: 0 4px 14px rgba(58, 50, 44, .05); }
.q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } @media (max-width: 420px) { .q-opts { grid-template-columns: 1fr; } }
.q-opt { border: 1.5px solid var(--accent2); background: #fff; border-radius: 999px; padding: 11px 14px; font-size: 15px; cursor: pointer; color: var(--ink); transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; text-align: center; font-weight: 500; }
.q-opt:hover { border-color: var(--accent1); background: rgba(202, 121, 64, .06); transform: scale(1.03); box-shadow: 0 6px 16px rgba(58, 50, 44, .08); }

/* ============================================================
   以下為新增：header / nav / footer / 登入態 widget / dashboard 等
   ============================================================ */

/* ---- 頂部誠實帶 ---- */
/* 行銷折扣碼 banner：暖色漸層 + 半透明 + 細邊，高度精簡，互動可複製碼 */
.lrl-topbar { position: sticky; top: 0; z-index: 40; background: linear-gradient(90deg, rgba(217, 114, 47, .13), rgba(224, 164, 28, .11) 48%, rgba(95, 166, 62, .10)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(202, 121, 64, .22); }
.lrl-topbar-in { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12.5px; padding: 4px 0; }
.lrl-promo-fallback { color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.lrl-promo { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(-3px); transition: opacity .4s, transform .4s; }
.lrl-promo.in { opacity: 1; transform: none; }
.lrl-promo-tag { font-weight: 700; color: #B5602A; white-space: nowrap; }
.lrl-promo-txt { color: var(--ink); white-space: nowrap; }
.lrl-promo-txt b { color: #A8642E; }
.lrl-promo-code { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .66); border: 1.5px dashed rgba(202, 121, 64, .6); color: #A8642E; font-weight: 700; letter-spacing: .5px; border-radius: 999px; padding: 2px 11px; cursor: pointer; font-family: ui-monospace, "SF Mono", monospace; transition: all .15s; }
.lrl-promo-code:hover { background: #fff; border-color: #CA7940; transform: translateY(-1px); }
.lrl-promo-code .cp { font-family: "Noto Sans TC", sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); border-left: 1px solid rgba(202, 121, 64, .3); padding-left: 7px; }
.lrl-promo-code.copied { background: #5FA63E; border-color: #5FA63E; color: #fff; }
.lrl-promo-code.copied .cp { color: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .4); }
.lrl-promo-disc { color: #5C7A4D; font-weight: 600; white-space: nowrap; }
.lrl-topbar-note { color: var(--muted); }
@media (max-width: 680px) { .lrl-promo-tag, .lrl-promo-disc, .lrl-topbar-note { display: none; } .lrl-promo, .lrl-promo-fallback { gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .lrl-promo { transition: none; } }

/* ---- 主導覽 header ---- */
.lrl-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.lrl-header-in { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lrl-brand { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--ink); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.lrl-brand span { color: var(--accent1); }
.lrl-brand-logo { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; }
.lrl-nav { display: none; align-items: center; gap: 24px; font-size: 15px; }
@media (min-width: 1024px) { .lrl-nav { display: flex; } }
.lrl-nav a { color: rgba(58, 50, 44, .8); text-decoration: none; transition: color .15s; }
.lrl-nav a:hover { color: var(--accent1); }

/* ---- 登入態 widget ---- */
.lrl-auth { display: none; align-items: center; gap: 10px; }
@media (min-width: 1024px) { .lrl-auth { display: flex; } }
.lrl-usermenu { position: relative; }
.lrl-userbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; color: var(--ink); font-size: 14px; transition: border-color .15s; }
.lrl-userbtn:hover { border-color: var(--accent1); }
.lrl-avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--accent1); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; font-family: var(--serif); flex: 0 0 auto; }
.lrl-username { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrl-usermenu-pop { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(58, 50, 44, .14); padding: 6px; min-width: 160px; z-index: 50; }
.lrl-usermenu-pop[hidden] { display: none; }
.lrl-usermenu-pop a, .lrl-usermenu-pop button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--ink); background: none; border: none; cursor: pointer; text-decoration: none; }
.lrl-usermenu-pop a:hover, .lrl-usermenu-pop button:hover { background: var(--bg); color: var(--accent1); }

/* ---- 手機選單 ---- */
.lrl-mbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); cursor: pointer; }
@media (min-width: 1024px) { .lrl-mbtn { display: none; } }
.lrl-mnav { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--line); border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px rgba(58, 50, 44, .15); padding: 20px 20px 28px; transition: transform .3s ease, opacity .25s ease; }
.lrl-mnav--hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (min-width: 1024px) { .lrl-mnav { display: none; } }
.lrl-mnav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lrl-mnav-close { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); cursor: pointer; }
.lrl-mnav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 15px; }
.lrl-mnav-grid a, .lrl-mnav-grid .lrl-mnav-logout { border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; background: var(--bg); color: var(--ink); text-decoration: none; cursor: pointer; font-size: 15px; text-align: left; }
.lrl-mnav-grid a.full, .lrl-mnav-grid .full { grid-column: 1 / -1; text-align: center; }
.lrl-mnav-grid .full-wrap a.full { display: block; }
.lrl-mnav-logout { width: 100%; }

/* ---- footer ---- */
.lrl-footer { background: var(--bg); border-top: 1px solid var(--line); }
.lrl-footer-in { padding-top: 40px; padding-bottom: 40px; }
.lrl-footer-grid { display: grid; gap: 32px; font-size: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lrl-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lrl-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.lrl-footer-brand { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.lrl-footer-col-title { color: var(--ink); font-weight: 500; margin-bottom: 8px; }
.lrl-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lrl-footer a { color: var(--muted); text-decoration: none; } .lrl-footer a:hover { color: var(--accent1); }
.lrl-footer p { color: var(--muted); line-height: 1.7; margin: 0; }
.lrl-footer-bottom { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .lrl-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.lrl-footer-disc { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.lrl-chip-soft { display: inline-flex; align-items: center; gap: 8px; background: rgba(202, 121, 64, .1); color: var(--accent1); font-size: 12px; border-radius: 999px; padding: 6px 12px; white-space: nowrap; flex: 0 0 auto; }

/* ============ 按鈕 / 表單（auth + 會員共用） ============ */
.lrl-btn { display: inline-grid; place-items: center; border-radius: 999px; padding: 12px 22px; font-size: 15px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; text-decoration: none; line-height: 1.2; }
.lrl-btn--primary { background: var(--accent1); color: #fff; box-shadow: 0 8px 22px rgba(202, 121, 64, .28); }
.lrl-btn--primary:hover { transform: translateY(-1px); }
.lrl-btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.lrl-btn--ghost:hover { border-color: var(--accent1); }
.lrl-btn--block { width: 100%; }
.lrl-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.lrl-field { margin-bottom: 14px; }
.lrl-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.lrl-input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px; color: var(--ink); transition: box-shadow .2s, border-color .2s; }
.lrl-input:focus { outline: none; border-color: var(--accent1); box-shadow: 0 0 0 4px rgba(202, 121, 64, .18); }
.lrl-hint { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-top: 10px; }
.lrl-error { font-size: 13px; color: #9A4A3A; margin-top: 8px; }
.lrl-devcode { background: rgba(148, 175, 158, .16); color: var(--good); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-top: 10px; }
.lrl-otp { display: flex; gap: 8px; }
.lrl-otp .lrl-input { text-align: center; letter-spacing: .35em; font-size: 18px; }

/* ---- auth 卡 ---- */
.lrl-auth-card { max-width: 440px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: 0 18px 48px rgba(58, 50, 44, .10); }
.lrl-auth-card h1 { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--ink); margin: 0 0 6px; }
.lrl-auth-sub { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
.lrl-tabs { display: flex; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 20px; }
.lrl-tab { flex: 1; text-align: center; padding: 9px 12px; border-radius: 999px; font-size: 14px; color: var(--muted); cursor: pointer; border: none; background: none; transition: background .15s, color .15s; }
.lrl-tab.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(58, 50, 44, .08); font-weight: 500; }

/* ============ stat 卡 ============ */
.lrl-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: 0 6px 20px rgba(58, 50, 44, .06); }
.lrl-stat-num { font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--ink); line-height: 1.1; }
.lrl-stat-label { color: var(--muted); font-size: 13px; margin-top: 4px; }
.lrl-stat-sub { color: var(--accent1); font-size: 12px; margin-top: 6px; }

/* ============ 長條圖 .bar ============ */
.lrl-barchart { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 72px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.bar-label { color: #6f6459; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: var(--accent1); width: 0; transition: width .6s ease; }
.bar-val { text-align: right; color: var(--muted); }
.bar--good .bar-fill { background: var(--good); }
.bar--warn .bar-fill { background: var(--warn); }
.bar--accent2 .bar-fill { background: var(--accent2); }

/* ============ 甜甜圈 .donut（conic-gradient，--donut-p 0~100、--donut-c 色） ============ */
.donut { position: relative; width: var(--donut-size, 128px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--donut-c, var(--accent1)) calc(var(--donut-p, 50) * 1%), var(--line) 0);
  display: grid; place-items: center; }
.donut::before { content: ""; position: absolute; inset: var(--donut-thick, 18px); background: var(--surface); border-radius: 50%; }
.donut-center { position: relative; text-align: center; line-height: 1.2; }
.donut-center b { font-family: var(--serif); font-size: 26px; color: var(--ink); display: block; }
.donut-center span { font-size: 12px; color: var(--muted); }
.donut-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; color: #6f6459; }
.donut-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* ============ 會員 dashboard ============ */
.lrl-dash { display: grid; gap: 18px; }
.lrl-dash-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 720px) { .lrl-dash-stats { grid-template-columns: repeat(4, 1fr); } }
.lrl-dash-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lrl-dash-grid { grid-template-columns: 1.4fr 1fr; } }
.lrl-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: 0 6px 20px rgba(58, 50, 44, .06); }
.lrl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lrl-panel-title { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0; }
.lrl-panel-link { font-size: 13px; color: var(--muted); text-decoration: none; } .lrl-panel-link:hover { color: var(--accent1); }
.lrl-profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.lrl-profile-head .lrl-avatar { width: 52px; height: 52px; font-size: 22px; }
.lrl-tier { display: inline-flex; align-items: center; gap: 6px; background: var(--butter); color: var(--deep); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 12px; }

/* ============ 分頁表格 ============ */
.lrl-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.lrl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lrl-table th, .lrl-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lrl-table th { color: var(--muted); font-weight: 500; background: var(--bg); }
.lrl-table tbody tr:hover { background: rgba(202, 121, 64, .04); }
.lrl-table tbody tr:last-child td { border-bottom: none; }
.lrl-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.lrl-pager button { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 14px; }
.lrl-pager button:hover:not(:disabled) { border-color: var(--accent1); }
.lrl-pager button[aria-current="true"] { background: var(--accent1); color: #fff; border-color: var(--accent1); }
.lrl-pager button:disabled { opacity: .45; cursor: not-allowed; }

/* ============ reduced-motion ============ */
@media (prefers-reduced-motion: reduce) {
  .pill:hover, .q-opt:hover, .rank-card:hover, .cat-card:hover img, .lrl-card:hover, .lrl-card:hover .lrl-card-img, .eval-card:hover, .lrl-btn--primary:hover { transform: none !important; }
  .eval-card:hover .eval-fill { animation: none !important; }
  .lrl-mnav, .bar-fill { transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============ 會員系統 2026-07-21 ============ */
.lrl-step-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; margin-bottom: 12px; }
.lrl-vbadge { display: inline-flex; align-items: center; font-size: 12px; border-radius: 999px; padding: 4px 10px; white-space: nowrap; flex: 0 0 auto; }
.lrl-vbadge--ok { background: rgba(92, 122, 77, .12); color: var(--good); border: 1px solid rgba(92, 122, 77, .28); }
.lrl-vbadge--no { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.lrl-sysnote { background: rgba(246, 231, 198, .5); border: 1px solid rgba(202, 121, 64, .25); color: var(--ink); border-radius: 14px; padding: 16px 18px; font-size: 14px; line-height: 1.7; text-align: center; }
.lrl-done { text-align: center; font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); padding: 10px 0 4px; }
.lrl-done .ck { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 999px; background: rgba(92, 122, 77, .14); color: var(--good); font-size: 26px; }
.lrl-okmsg { font-size: 13px; color: var(--good); margin-top: 8px; }