/* ============================================================================
   012.tw 會員中心樣式（/member/* 與頁尾／表頭的會員入口）
   ----------------------------------------------------------------------------
   ★ 只補 nav.css 沒有的東西：站上的 .nh-container／.nh-card／.nh-top／.nh-foot
     （深色底、圓角卡片、輕量陰影）全部沿用，會員頁才不會像另一個網站（規格 §47）。
   ★ 淺色底＋圓角卡片＋清楚數字＋少量顏色強調（規格 §47 指定的方向，本站是深色版）。
   ★ 手機優先（規格 §51）：底部導覽 .mb-tabs 只在 ≤900px 出現。
   ⚠️ 改這個檔要升 ?v=（member/index.php 的 link；Cloudflare 對 css 有快取）。
   ========================================================================== */

/* ---------- 表頭／頁尾的會員入口（所有頁面共用，由 member.js 換成登入狀態） ---------- */
.mb-entry{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
	border:1px solid rgba(125,211,252,.35);background:rgba(125,211,252,.10);color:#cfe9ff;
	font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.mb-entry:hover{border-color:rgba(125,211,252,.75);color:#fff;background:rgba(125,211,252,.18)}
.mb-entry.on{border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.14)}
.mb-entry .lv{color:#67e8f9}

/* ---------- 會員中心版面 ---------- */
.mb-body{background:#070d1a}
.mb-main{max-width:960px;margin:18px auto 90px;padding:0 14px}
.mb-h1{font-size:20px;color:#fff;margin:6px 0 14px;font-weight:800;letter-spacing:.3px}
.mb-card{margin:0 0 14px;padding:18px}
.mb-card h2{font-size:15.5px;color:#fff;margin:0 0 12px;display:flex;align-items:center;gap:6px}
.mb-card h3{font-size:13.5px;color:#dbe7ff;margin:16px 0 8px}
.mb-note{color:#9fb6d9;font-size:12.5px;line-height:1.75;margin:8px 0}
.mb-note a{color:#7dd3fc}
.mb-dim{opacity:.8}
.mb-msg{color:#7dd3fc;font-size:12.5px;margin-left:8px}
.mb-msg.bad{color:#fca5a5}

/* ---------- 設定：第三方帳號綁定（2026-09-20 站方指示） ---------- */
.mb-binds{display:grid;gap:10px;margin:10px 0}
.mb-bind{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:11px 13px;border-radius:12px;
	background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.16)}
.mb-bind b{color:#fff;min-width:64px;font-size:13.5px}
.mb-bind .mb-btn{margin:0}
.mb-on{color:#67e8f9;font-weight:700;font-size:13px}

/* ---------- 會員首頁：等級卡 ---------- */
.mb-hero-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mb-avatar{flex:none;width:52px;height:52px;border-radius:16px;overflow:hidden;display:flex;align-items:center;
	justify-content:center;font-size:20px;font-weight:900;color:#06121f;
	background:linear-gradient(135deg,#22d3ee,#a78bfa)}
.mb-avatar img{width:100%;height:100%;object-fit:cover}
.mb-hero-id b{display:block;color:#fff;font-size:16.5px;font-weight:800;line-height:1.4}
.mb-lv{color:#67e8f9;font-size:13px;font-weight:700}
.mb-xp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.mb-xp-num{color:#fff;font-size:16px;font-weight:800}
.mb-xp-sub{color:#9fb6d9;font-size:12px}
.mb-bar{height:9px;border-radius:999px;background:rgba(148,163,184,.22);overflow:hidden}
.mb-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#a78bfa);transition:width .5s ease}
.mb-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mb-chip{font-size:12.5px;color:#dbe7ff;padding:5px 11px;border-radius:999px;
	background:rgba(148,163,184,.14);border:1px solid rgba(148,163,184,.22)}
.mb-chip.on{color:#fff;border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.16)}
.mb-big{color:#fff;font-size:15px;margin:2px 0 12px}
.mb-big b{color:#67e8f9;font-size:18px}

/* ---------- 任務 ---------- */
.mb-tasks{list-style:none;margin:0;padding:0}
.mb-tasks li{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.mb-tasks li:last-child{border-bottom:0}
.mb-tk{flex:none;width:20px;color:#64748b}
.mb-tasks li.done .mb-tk{color:#22d3ee}
.mb-tt{flex:1;color:#e6eefc;font-size:14px}
.mb-tasks li.done .mb-tt{color:#9fb6d9;text-decoration:line-through}
.mb-tx{flex:none;color:#67e8f9;font-size:13px;font-weight:700}

/* ---------- 按鈕／欄位 ---------- */
.mb-btn{display:inline-block;cursor:pointer;font:inherit;font-size:14px;font-weight:700;padding:11px 20px;border:0;
	border-radius:999px;color:#06121f;background:linear-gradient(135deg,#22d3ee,#a78bfa);text-decoration:none}
.mb-btn:hover{filter:brightness(1.08)}
.mb-btn:active{transform:scale(.98)}
.mb-btn[disabled]{cursor:default;opacity:.75}
.mb-btn.ok{background:rgba(34,211,238,.18);color:#67e8f9;border:1px solid rgba(34,211,238,.45)}
.mb-btn.ghost{background:transparent;color:#cfe9ff;border:1px solid rgba(125,211,252,.45);font-weight:600}
.mb-fld{margin:0 0 12px}
.mb-fld label{display:block;color:#9fb6d9;font-size:12.5px;margin-bottom:6px}
.mb-fld input{width:100%;box-sizing:border-box;font:inherit;font-size:14.5px;padding:11px 13px;border-radius:12px;
	border:1px solid rgba(148,163,184,.28);background:rgba(148,163,184,.14);color:#eef4ff}
.mb-fld input:focus{outline:none;border-color:rgba(56,189,248,.7);box-shadow:0 0 0 3px rgba(34,211,238,.16)}
.mb-err{color:#fca5a5;font-size:12.5px;margin:6px 0}
.mb-actbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}

/* ---------- 卡片格（工具／收藏） ---------- */
.mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0 4px}
.mb-tool-wrap{position:relative;display:block}
.mb-tool,.mb-fav{display:block;padding:12px 14px;border-radius:12px;background:rgba(148,163,184,.12);
	border:1px solid rgba(148,163,184,.2);color:#e6eefc;font-size:13.5px;text-decoration:none;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-family:inherit;width:100%;
	box-sizing:border-box;cursor:pointer}
.mb-tool:hover,.mb-fav:hover{border-color:rgba(34,211,238,.5);color:#fff}
.mb-tool em{color:#9fb6d9;font-size:11.5px;font-style:normal}
.mb-tool.add{background:transparent;border-style:dashed;color:#9fb6d9}
.mb-x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;line-height:1;border-radius:50%;border:0;
	cursor:pointer;background:#334155;color:#e2e8f0;font-size:14px;font-family:inherit}
.mb-x:hover{background:#b3261e;color:#fff}

/* ---------- 徽章 ---------- */
.mb-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.mb-badge{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:12px;
	background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.18);opacity:.55}
.mb-badge.on{opacity:1;border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.10)}
.mb-badge i{font-style:normal;font-size:22px;line-height:1.2}
.mb-badge em{font-style:normal;color:#e6eefc;font-size:12px;text-align:center;line-height:1.4}
.mb-badge small{color:#67e8f9;font-size:10.5px}
.mb-badge small.dim{color:#64748b}

/* ---------- 打卡月曆 ---------- */
.mb-cal{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;margin:10px 0 14px}
.mb-cal i{display:block;padding-top:100%;border-radius:3px;background:rgba(148,163,184,.16)}
.mb-cal i.on{background:linear-gradient(135deg,#22d3ee,#a78bfa)}
.mb-list{list-style:none;margin:0;padding:0;color:#dbe7ff;font-size:13.5px;line-height:2}

/* ---------- 表格 ---------- */
.mb-tblwrap{overflow-x:auto}
.mb-tbl{width:100%;border-collapse:collapse;font-size:13px;color:#dbe7ff}
.mb-tbl th{text-align:left;color:#9fb6d9;font-weight:600;font-size:12px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.mb-tbl td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
.mb-tbl tr:last-child td{border-bottom:0}
.mb-tbl td:nth-child(3){white-space:normal}
.mb-xpcol{color:#67e8f9;font-weight:700}

/* ---------- 登入／註冊 ---------- */
.mb-auth{max-width:430px;margin:0 auto;padding:22px}
.mb-or{display:flex;align-items:center;gap:10px;color:#64748b;font-size:12px;margin:16px 0 10px}
.mb-or::before,.mb-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.mb-oauth{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:0 0 6px}

/* ---------- 第三方登入／綁定按鈕：各自的品牌樣式與圖示（2026-09-20 站方指示） ----------
   · Google＝官方「白色按鈕」（白底／#3c4043 文字／#dadce0 邊框／四色 G）
   · LINE＝官方品牌綠 #06C755／白字／白底方塊「LINE」圖示
   圖示全部內嵌（SVG／CSS），不連外部資源。 */
.mb-oauth-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 14px;
	border-radius:10px;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;
	transition:box-shadow .15s ease,filter .15s ease}
.mb-oauth-btn.g{background:#fff;color:#3c4043;border:1px solid #dadce0}
.mb-oauth-btn.g:hover{box-shadow:0 1px 3px rgba(0,0,0,.28)}
.mb-oauth-btn.l{background:#06c755;color:#fff;border:1px solid #06c755}
.mb-oauth-btn.l:hover{filter:brightness(1.06)}
.mb-oauth-btn:active{transform:scale(.99)}
.mb-oauth-btn:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.mb-oauth-svg{width:18px;height:18px;flex:none}
.mb-oauth-line{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
	border-radius:5px;background:#fff;color:#06c755;
	font:800 8px/1 Arial,Helvetica,sans-serif;letter-spacing:-.35px;text-indent:-.35px}
/* 小尺寸（會員中心「設定」頁的綁定按鈕） */
.mb-oauth-btn.sm{min-height:34px;padding:7px 12px;font-size:13px;border-radius:9px;gap:7px}
.mb-oauth-btn.sm .mb-oauth-svg{width:16px;height:16px}
.mb-oauth-btn.sm .mb-oauth-line{width:18px;height:18px;font-size:7px;border-radius:4px;letter-spacing:-.2px}

/* ---------- 行動版底部導覽（規格 §51；只在會員頁出現） ---------- */
.mb-tabs{display:none}

/* ---------- 升級提示（規格 §50：1～2 秒、不做大型動畫） ---------- */
.mb-lvup{position:fixed;left:50%;top:18%;transform:translate(-50%,-12px);z-index:9600;opacity:0;
	transition:opacity .25s ease,transform .25s ease;pointer-events:none;
	padding:16px 24px;border-radius:18px;text-align:center;color:#06121f;
	background:linear-gradient(135deg,#22d3ee,#a78bfa);box-shadow:0 18px 48px rgba(34,211,238,.35)}
.mb-lvup.on{opacity:1;transform:translate(-50%,0)}
.mb-lvup b{display:block;font-size:16px;font-weight:900;margin-bottom:2px}
.mb-lvup span{font-size:12.5px;font-weight:700}

@media(max-width:900px){
	.mb-main{margin-bottom:76px}
	.mb-tabs{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;
		background:rgba(10,18,38,.97);border-top:1px solid rgba(148,163,184,.22);
		-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
	.mb-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;
		color:#9fb6d9;font-size:11px;padding:4px 0}
	.mb-tabs a i{font-style:normal;font-size:17px;line-height:1.2}
	.mb-tabs a.on{color:#67e8f9}
	.mb-cal{grid-template-columns:repeat(11,1fr)}
}
@media(max-width:420px){
	.mb-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
	.mb-card{padding:15px}
}
/* ============================================================================
   2026-09-20（站方三則指示）
     ① 會員中心的「類型選單」換位置 → .mb-nav（內容區最上方的一排膠囊分頁）
     ② 打卡後的提示改成站內提示條 .mb-toast（**不要用系統 alert**）
     ③ 刪除收藏的確認改成站內確認框 .mb-modal（**不要用系統 confirm**）
   ========================================================================== */

/* ---------- ① 會員中心主導覽（原本擠在頁首漢堡選單裡） ---------- */
.mb-nav{display:flex;gap:6px;align-items:center;margin:0 0 14px;padding:6px;border-radius:999px;
	background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.18);overflow-x:auto;
	-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mb-nav::-webkit-scrollbar{display:none}
.mb-nav a{flex:none;display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:999px;
	color:#cfe0f7;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.mb-nav a i{font-style:normal;font-size:14px;line-height:1}
.mb-nav a:hover{background:rgba(148,163,184,.16);color:#fff}
.mb-nav a.on{background:linear-gradient(135deg,#22d3ee,#a78bfa);color:#06121f}
.mb-nav .mb-nav-out{margin-left:auto;color:#9fb6d9;background:transparent;border:1px solid rgba(148,163,184,.3);font-weight:600}
.mb-nav .mb-nav-out:hover{border-color:rgba(248,113,113,.55);color:#fca5a5;background:transparent}

/* ---------- ② 站內提示條（取代 alert()）----------
   右下角堆疊、自動消失、可點一下關掉；右上角點擊區不擋內容（pointer-events 只在提示條本身）。 */
.mb-toasts{position:fixed;right:16px;bottom:16px;z-index:9700;display:flex;flex-direction:column;gap:8px;
	max-width:min(340px,calc(100vw - 32px));pointer-events:none}
.mb-toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;
	background:#0b1a2b;border:1px solid rgba(34,211,238,.45);box-shadow:0 16px 40px rgba(0,0,0,.5);
	color:#e6eefc;cursor:pointer;opacity:0;transform:translateY(8px);
	transition:opacity .2s ease,transform .2s ease}
.mb-toast.on{opacity:1;transform:none}
.mb-toast .ic{flex:none;font-size:18px;line-height:1.2}
.mb-toast b{display:block;color:#fff;font-size:14px;margin-bottom:2px}
.mb-toast span{display:block;color:#9fb6d9;font-size:12.5px;line-height:1.6}
.mb-toast.badge{border-color:rgba(167,139,250,.6)}
.mb-toast.warn{border-color:rgba(248,113,113,.55)}
.mb-toast.warn .ic{color:#fca5a5}

/* ---------- ③ 站內確認框（取代 confirm()）---------- */
.mb-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9800;display:none;align-items:center;
	justify-content:center;padding:16px;background:rgba(3,8,18,.72);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mb-modal.on{display:flex}
.mb-modal-card{width:min(380px,100%);padding:18px;border-radius:16px;background:#0b1a2b;
	border:1px solid rgba(148,163,184,.28);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.mb-modal-card p{margin:0 0 14px;color:#e6eefc;font-size:14px;line-height:1.7}
.mb-modal-act{display:flex;gap:8px;justify-content:flex-end}
.mb-modal-act button{cursor:pointer;font:inherit;font-size:13.5px;font-weight:700;padding:9px 18px;border-radius:999px;border:0}
.mb-modal-act .ok{background:linear-gradient(135deg,#22d3ee,#a78bfa);color:#06121f}
.mb-modal-act .no{background:transparent;border:1px solid rgba(148,163,184,.4);color:#cfe0f7}
@media(max-width:900px){
	.mb-toasts{left:12px;right:12px;bottom:calc(66px + env(safe-area-inset-bottom));max-width:none}
	.mb-nav{border-radius:14px;padding:5px}
	.mb-nav a{padding:8px 12px;font-size:13px}
}

@media (prefers-reduced-motion: reduce){
	.mb-bar i,.mb-lvup,.mb-toast{transition:none}
}

/* ============================================================================
   「同步」頁：表格（2026-09-21 站方指示：「开关是显示，有没有打开同步，最好用表格，美化一下」）
   ----------------------------------------------------------------------------
   四欄：項目（名稱＋說明）／大小／上次同步／同步開關。
   · 外層 .mb-sync-wrap 做橫向捲動 → 窄螢幕不硬塞、也不把「上次同步」折成兩行。
   · 開關是**真的** checkbox（label 包住 input＋span）：點整顆都行、鍵盤可用、螢幕閱讀器讀得到；
     `input` 透明鋪滿並在最上層（z-index:1）。
   · 關掉的列整列淡化（.off），一眼看得出哪些沒在同步。
   ⚠️ 這裡只放會員中心專用樣式（member.css 只在 /member/* 載入），首頁不會多載任何東西。
   ========================================================================== */
.mb-sync-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.mb-sync-tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.mb-sync-tbl th{text-align:left;font-size:12px;font-weight:700;color:#9aa9c6;letter-spacing:.02em;
	padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.mb-sync-tbl th.sw-col{text-align:center}
.mb-sync-tbl td{padding:11px 10px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}
.mb-sync-tbl tr:last-child td{border-bottom:0}
.mb-sync-tbl tr.off td{opacity:.55}
.mb-sync-tbl .nm-cell b{display:block;color:#eaf6ff;font-weight:700}
.mb-sync-tbl .nm-cell em{display:block;font-style:normal;color:#9aa9c6;font-size:12px;margin-top:3px}
.mb-sync-tbl .sz,.mb-sync-tbl .at{white-space:nowrap;color:#cfe9ff;font-variant-numeric:tabular-nums}
.mb-sync-tbl .at{color:#9aa9c6}
.mb-sync-tbl .sw-col{text-align:center;width:64px}
.mb-sync-none{color:#9aa9c6;padding:16px 10px !important;text-align:center}
/* 開關（仿 iOS） */
.mb-sync-tbl .sw{position:relative;display:inline-block;width:46px;height:28px;vertical-align:middle}
.mb-sync-tbl .sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.mb-sync-tbl .sw span{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.14);
	border:1px solid var(--line);transition:.25s}
.mb-sync-tbl .sw span:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
	background:#e8f2ff;box-shadow:0 2px 6px rgba(0,0,0,.45);transition:.25s}
.mb-sync-tbl .sw input:checked+span{background:linear-gradient(135deg,#22d3ee,#a78bfa);border-color:transparent}
.mb-sync-tbl .sw input:checked+span:after{left:21px}
.mb-sync-tbl .sw input:focus-visible+span{outline:2px solid #7dd3fc;outline-offset:2px}