/*
 * 前台會員區（登入下拉、頭像選單、小鈴鐺、點數、快掉級提醒、登入提示視窗、提示條）——2026-10-25 照搬 OnceNews，規則一字不改：
 *   public/assets/css/site-blocks.css 第 468～558 行（.mbm 頁首、登入下拉、小鈴鐺、點數、快掉級提醒）、第 613～627 行（.mb-toast、.mb-modal）
 *   public/assets/css/site-tail.css 第 212～213 行（頭像圖）、第 64 行（提示條置中）、第 68 行（手機的選單與下拉）
 * OnceNews 用的色票（--foreground、--card、--muted…）本站沒有，這裡在會員區自己的範圍內補上 OnceNews 的值（亮色、暗色），不動全站變數。
 */
.mbm, .mb-modal, .mb-toast, .bpop {
  --foreground: #15171c; --card: #ffffff; --muted: #eef0f3; --muted-foreground: #676c75; --border: #e1e4e9; --background: #ffffff;
  --click: #7c3aed; --click-soft: #f1ebfe; --up: #d62839;
}
:root[data-mode="dark"] .mbm, :root[data-mode="dark"] .mb-modal, :root[data-mode="dark"] .mb-toast {
  --foreground: #eceef2; --card: #14171c; --muted: #1d2128; --muted-foreground: #969ca6; --border: #252a32; --background: #0f1216;
  --click: #a78bfa; --click-soft: #2a2140; --up: #ff4d5e;
}
  /* =====================================================================
     會員功能＋金推（2026-09-27 從 member-v1／goldpush-v1 整合進 V5）：樣式限定在 .mbm 裡
     ===================================================================== */
  .mbm .mi { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; background: center / contain no-repeat; }
  .mbm .mi-flame { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='a' cx='.5' cy='.85' r='.95'%3E%3Cstop offset='0' stop-color='%23fff7ae'/%3E%3Cstop offset='.35' stop-color='%23fbbf24'/%3E%3Cstop offset='.7' stop-color='%23f97316'/%3E%3Cstop offset='1' stop-color='%23b91c1c'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='.5' cy='.7' r='.7'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%23fff3c4'/%3E%3Cstop offset='1' stop-color='%23fbbf24'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M50 3C58 19 79 30 79 58C79 79 66 95 50 95C34 95 21 79 21 58C21 44 29 35 36 29C37 39 42 45 48 46C44 31 44 17 50 3Z' fill='url%28%23a%29' stroke='%239a3412' stroke-width='3'/%3E%3Cpath d='M50 40C55 50 67 56 67 70C67 82 59 89 50 89C41 89 33 82 33 70C33 62 38 57 43 53C44 59 47 62 50 62C48 55 47 47 50 40Z' fill='url%28%23b%29'/%3E%3C/svg%3E"); }
  .mbm .mi-rocket { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%238e97a6'/%3E%3Cstop offset='.38' stop-color='%23f4f6f9'/%3E%3Cstop offset='.62' stop-color='%23d5dae2'/%3E%3Cstop offset='1' stop-color='%237d8696'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236b7483'/%3E%3Cstop offset='1' stop-color='%239aa3b1'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4c2'/%3E%3Cstop offset='.4' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f97316' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M13.9 24.6h4.2c0 2.3-.9 4.3-2.1 5.9-1.2-1.6-2.1-3.6-2.1-5.9z' fill='url%28%23l%29'/%3E%3Cpath d='M11.6 16.4 8.6 20.2v4.6l3-1.9zM20.4 16.4l3 3.8v4.6l-3-1.9z' fill='url%28%23f%29'/%3E%3Cpath d='M13 22.4h6l-.9 2h-4.2z' fill='%234b5563'/%3E%3Cpath d='M16 2.2C19.3 4.7 20.4 8.7 20.4 12.8v9.6h-8.8v-9.6c0-4.1 1.1-8.1 4.4-10.6z' fill='url%28%23b%29' stroke='%236b7483' stroke-width='.5'/%3E%3Ccircle cx='16' cy='12.4' r='2.1' fill='%231f2937' stroke='%23cbd2dc' stroke-width='.9'/%3E%3C/svg%3E"); }
  /* 預言家的小圖示：原型第 742 行本來是水晶球，但 body 最後（第 6175 行）又用 JS 換成徽章定案的尖帽預言家
     （badges-v2、等級 I、不帶等級標籤）。第 128 輪照最後看到的那一版，SVG 由同源探針從原型取回，
     放進 `public/images/badges/seer.svg`（徽章圖之後階段 5 的徽章牆也放這裡） */
  .mbm .mi-seer { background-image: url("/images/badges/seer.svg"); }
  .mbm .mi-win { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.45' cy='.4' r='.7'%3E%3Cstop offset='0' stop-color='%23fff7ae'/%3E%3Cstop offset='.5' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M50 4 61 36 95 37 68 57 78 90 50 70 22 90 32 57 5 37 39 36Z' fill='url%28%23g%29' stroke='%2392400e' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .mbm .mi-search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676c75' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
  .mbm { --gold: #b7791f; --ok: #15803d; --vio: #7c3aed; --vio-soft: #f1ebfe; }
  :root[data-mode="dark"] .mbm { --vio: #a78bfa; --vio-soft: #2a2140; }
  .mbm button { font: inherit; cursor: pointer; }
  .mbm .lvb { display: inline-block; font: 800 11px/18px "Barlow Condensed", sans-serif; padding: 0 6px; border-radius: 4px; background: var(--vio); color: #fff; }
  .mbm .lvpage .keep { margin: 6px 0 0; font-size: 11.5px; color: var(--muted-foreground); line-height: 1.6; } .mbm .lvpage b.t { color: var(--foreground); font-weight: 800; }
  .mbm .lvb.l1, .mbm .lvpage .lv.l1 { background: var(--vio-soft); color: var(--vio); box-shadow: inset 0 0 0 1px #d8c8fb; } /* 等級由淺到深：Lv1 淡紫、Lv2 紫、Lv3 金 */
  :root[data-mode="dark"] .mbm .lvb.l1, :root[data-mode="dark"] .mbm .lvpage .lv.l1 { box-shadow: inset 0 0 0 1px #4c3a78; }
  .mbm .lvb.l3 { background: linear-gradient(90deg, #d99a0b, #f5c542); color: #3b2600; }
  .mbm .av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vio-soft); color: var(--vio); font-weight: 900; font-size: 14px; flex-shrink: 0; }
  /* 頁首 */
  #mb-user { position: relative; display: flex; align-items: center; gap: 6px; }
  #mb-user .login { height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); font-size: 13.5px; font-weight: 800; color: var(--foreground); }
  #mb-user .login:hover { background: var(--muted); }
  /* 登入下拉（2026-10-01 使用者：改成 Once Hit 家族共用的登入入口，照 OnceEvent HeaderClient 的「登入 ⌄」＋四項）：
     快速登入（popup）／在新分頁登入／前往帳號中心登入（整頁跳轉）／前往帳號中心；外觀用本站白底卡片、跟頭像選單同一套 */
  #mb-user .login { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; } /* 360 寬實測「登入」會折成兩行 */
  #mb-user .login svg { width: 14px; height: 14px; transition: transform .15s; }
  #mb-user .login.on svg { transform: rotate(180deg); }
  #mb-user .dd { position: absolute; right: 0; top: 44px; z-index: 70; width: 232px; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgb(0 0 0 / .18); padding: 6px; }
  .mbm .dd-it { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font-size: 13.5px; font-weight: 600; text-align: left; text-decoration: none; }
  .mbm .dd-it:hover { background: var(--muted); }
  .mbm .dd-it svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--click); }
  #mb-user .stk { display: inline-flex; align-items: center; gap: 3px; height: 36px; padding: 0 10px; border-radius: 999px; background: #fff4e6; color: #c2410c; font: 700 15px "Barlow Condensed", sans-serif; }
  :root[data-mode="dark"] #mb-user .stk { background: #3a2210; color: #fdba74; }
  /* 小鈴鐺（notify-v1 定案，2026-09-28）：放在頭像左邊 */
  #mb-user .bell { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--muted-foreground); }
  #mb-user .bell:hover, #mb-user .bell.on { background: var(--muted); color: var(--foreground); }
  #mb-user .bell svg { width: 17px; height: 17px; }
  #mb-user .bell .dot { position: absolute; right: -3px; top: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--up); color: #fff; font: 700 10.5px/16px "Barlow Condensed", sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--card); }
  #mb-user .np { position: absolute; right: 0; top: 44px; z-index: 70; width: min(330px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px rgb(0 0 0 / .18); overflow: hidden; }
  #mb-user .np-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 9px 14px; border-bottom: 1px solid var(--border); }
  #mb-user .np-h b { font-size: 14px; }
  #mb-user .np-h .cnt { font: 600 11px "IBM Plex Mono", monospace; color: var(--muted-foreground); }
  #mb-user .np-h .rall { margin-left: auto; height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: none; font-size: 12px; color: var(--click); }
  #mb-user .np-h .rall:hover { background: var(--click-soft); }
  #mb-user .np-h .rall:disabled { color: var(--muted-foreground); opacity: .6; background: none; cursor: default; }
  #mb-user .np-list { max-height: min(330px, 60vh); overflow-y: auto; }
  #mb-user .np-g { padding: 7px 14px 3px; font-size: 11px; font-weight: 700; color: var(--muted-foreground); background: color-mix(in srgb, var(--muted) 45%, var(--card)); border-bottom: 1px solid var(--border); }
  #mb-user .nt { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; width: 100%; padding: 10px 14px 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; color: inherit; }
  #mb-user .nt:hover { background: var(--muted); }
  #mb-user .nt.unread { background: var(--click-soft); }
  #mb-user .nt.unread::before { content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--click); }
  #mb-user .nt .nic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
  #mb-user .nt .nic svg { width: 17px; height: 17px; }
  #mb-user .nt .tt { font-size: 13px; font-weight: 700; line-height: 1.45; }
  #mb-user .nt .ms { margin-top: 1px; font-size: 12px; color: var(--muted-foreground); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #mb-user .nt .tm { margin-top: 3px; font-size: 11px; color: var(--muted-foreground); opacity: .85; }
  #mb-user .np-f { padding: 9px 14px; text-align: center; font-size: 12px; color: var(--muted-foreground); background: color-mix(in srgb, var(--muted) 45%, var(--card)); border-top: 1px solid var(--border); }
  #mb-user .np-f button { border: 0; background: none; color: inherit; font: inherit; }
  #mb-user .np-empty { padding: 32px 20px; text-align: center; color: var(--muted-foreground); }
  #mb-user .np-empty svg { width: 34px; height: 34px; opacity: .4; }
  #mb-user .np-empty p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; }
  #mb-user .ubtn { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 8px 0 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); }
  #mb-user .ubtn:hover { background: var(--muted); }
  #mb-user .menu { position: absolute; right: 0; top: 44px; z-index: 70; width: 268px; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgb(0 0 0 / .18); padding: 6px; }
  #mb-user .menu .who { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  #mb-user .menu .who small { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11.5px; color: var(--muted-foreground); }
  #mb-user .menu a, #mb-user .menu button.it { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font-size: 13.5px; text-decoration: none; text-align: left; }
  #mb-user .menu a:hover, #mb-user .menu button.it:hover { background: var(--muted); }
  #mb-user .menu small.r { font-size: 11.5px; color: var(--muted-foreground); }
  @media (max-width: 639px) { #mb-user .stk { display: none; } }
  /* 點數（V6：會員功能改成點數制） */
  #mb-user .menu .pts { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 8px 10px; border-radius: 8px; background: #fff7e0; font-size: 13px; }
  #mb-user .menu .pts b { font: 700 18px "Barlow Condensed", sans-serif; color: #7a5600; }
  #mb-user .menu .pts small { font-size: 11.5px; color: var(--muted-foreground); }
  :root[data-mode="dark"] #mb-user .menu .pts { background: #3a2a10; } :root[data-mode="dark"] #mb-user .menu .pts b { color: #fbbf24; }
  .mbm .ptbox { margin: 16px -18px 0; padding: 10px 16px 12px; border-top: 1px solid var(--border); text-align: left; }
  .mbm .ptbox + .kpis { margin-top: 0; }
  .mbm .ptbar { height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; } .mbm .ptbar i { display: block; height: 100%; background: linear-gradient(90deg, #f5c542, #b7791f); }
  .mbm .ptbox small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted-foreground); }
  .mbm td.pt { text-align: right; font-weight: 700; white-space: nowrap; }
  /* 快掉級提醒（保級緩衝，member-v1 第 4 區） */
  #mb-user .menu a.warnm { margin: 0 0 6px; padding: 8px 10px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-weight: 700; font-size: 12.5px; }
  #mb-user .menu a.warnm:hover { background: #ffedd5; } #mb-user .menu a.warnm small { color: #9a3412; font-weight: 500; }
  :root[data-mode="dark"] #mb-user .menu a.warnm { background: #3a2210; color: #fdba74; } :root[data-mode="dark"] #mb-user .menu a.warnm small { color: #fdba74; }
  .mbm .warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; font-size: 13.5px; line-height: 1.7; color: #7c2d12; }
  .mbm .warn .ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #f97316; color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 13px; margin-top: 1px; }
  .mbm .warn b { color: #9a3412; } .mbm .warn small { color: #9a3412; }
  :root[data-mode="dark"] .mbm .warn { background: #2a1a0e; border-color: #7c2d12; color: #fed7aa; } :root[data-mode="dark"] .mbm .warn b, :root[data-mode="dark"] .mbm .warn small { color: #fdba74; }
  .mb-toast { position: fixed; z-index: 96; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: #15171c; color: #fff; font-size: 13.5px; line-height: 1.5; box-shadow: 0 10px 28px rgb(0 0 0 / .25); }
  .mb-toast b { color: #fcd34d; }
  .mb-modal { position: fixed; inset: 0; z-index: 90; background: rgb(15 17 22 / .45); display: grid; place-items: center; padding: 16px; }
  .mb-modal .box { width: 100%; max-width: 380px; background: var(--card); color: var(--foreground); border-radius: 16px; padding: 24px 22px 18px; text-align: center; box-shadow: 0 20px 50px rgb(0 0 0 / .25); }
  .mb-modal .ic { width: 64px; height: 64px; margin: 0 auto; } .mb-modal .ic svg { width: 100%; height: 100%; }
  .mb-modal h3 { margin: 8px 0 6px; font-size: 18px; font-weight: 900; } .mb-modal p { margin: 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.7; }
  .mb-modal .pg { margin: 12px 0 0; text-align: left; font-size: 12.5px; } .mb-modal .pg div { display: flex; justify-content: space-between; margin-top: 6px; }
  .mb-modal .bar { height: 7px; border-radius: 4px; background: var(--muted); overflow: hidden; margin-top: 3px; } .mb-modal .bar i { display: block; height: 100%; background: linear-gradient(90deg, #a78bfa, #7c3aed); }
  .mb-modal .ok { margin-top: 16px; width: 100%; height: 42px; border: 0; border-radius: 12px; background: var(--foreground); color: var(--card); font-size: 14px; font-weight: 800; }
  .mb-modal .ok2 { margin-top: 8px; width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 12px; background: none; color: inherit; font-size: 13px; }
  /* 登入提示裡的四個登入方式（跟頁首下拉同一組，照 OnceEvent AuthModal 也是把這幾個方式列成一排按鈕） */
  .mb-modal .mb-dd { margin: 14px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: 12px; text-align: left; }
  .mb-modal .mb-dd .dd-it:first-child { background: var(--click-soft); color: var(--click); font-weight: 800; }
  .mb-modal .mb-dd .dd-it:first-child:hover { filter: brightness(.97); }
  .mb-modal .msg { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 12.5px; text-align: left; line-height: 1.6; }
.mbm .av { position: relative; overflow: hidden; }
.mbm .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  /* 手機：頭像選單、登入下拉貼左右 8px（site-tail.css 第 68 行） */
  @media (max-width: 479px) { #mb-user .menu, #mb-user .dd { position: fixed; left: 8px; right: 8px; top: calc(56px + env(safe-area-inset-top, 0px)); width: auto; max-height: calc(100vh - 72px); overflow-y: auto; } }
  /* 底部浮動提示：左右各留 16px、內容多寬就多寬、置中（site-tail.css 第 64 行） */
  .mb-toast { left: 16px; right: 16px; width: fit-content; max-width: calc(100vw - 32px); margin: 0 auto; transform: none; box-sizing: border-box; }

/* 好好選頁首的位置（OnceNews 沒有這段）：會員區在捷徑（選購指南、特輯）右邊；手機版在 logo 那一排靠右、在搜尋與分類圖示左邊 */
.hd #mb-user { flex: none; display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) { .hd #mb-user { margin-left: auto; } .hd #mb-user + .hd-m { margin-left: 0; } }