/* 倉老闆會員端系列視覺 member-theme (2026-11-03 提案,預覽用,未部署)
 * 範圍:只在 <body class="cp-member-ui"> 內生效;不動 cangpro.css 全域,行銷頁不受影響。
 * 各頁原本寫死的品牌色已改成 var(--mu-*,原色) —— 沒載入本檔時 fallback 回舊色。
 * 色票對齊 cangpro-richmenu-final.png:暖米白/深藍/橘。純系統字體,無外部請求。 */
body.cp-member-ui{
  --mu-bg:#F7F2E9; --mu-card:#FFFCF7; --mu-line:#E6D7C2; --mu-ink:#1E3A5F;
  --mu-brand:#B94700; --mu-brand-d:#8F3700; --mu-accent:#E8620A;
  --mu-tint:#FFF0E2; --mu-muted:#5D6877; --mu-muted2:#6B7684;
  --mu-shadow:0 2px 12px rgba(30,58,95,.07);
  --mu-font:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  /* 既有各頁變數整批接管(不用 !important) */
  --cp-primary:var(--mu-brand); --cp-primary-d:var(--mu-brand-d); --cp-accent:var(--mu-accent);
  --cp-ink:var(--mu-ink); --cp-muted:var(--mu-muted); --cp-muted2:var(--mu-muted2);
  --cp-bg:var(--mu-bg); --cp-line:var(--mu-line); --cp-surface:var(--mu-card); --cp-tint:var(--mu-tint);
  --cp-r-card:20px; --cp-r-lg:20px; --cp-shadow:var(--mu-shadow); --cp-font:var(--mu-font);
  --p:var(--mu-ink); --o:var(--mu-brand); --a:var(--mu-brand); --bg:var(--mu-bg); --w:var(--mu-card); --b:var(--mu-line); --g:var(--mu-brand-d); --m:var(--mu-muted);
  background:var(--mu-bg); color:var(--mu-ink); font-family:var(--mu-font); font-size:16px; line-height:1.5;
}
/* 頁面殼(member/wallet/pickup-book 有桌面漸層) */
body.cp-member-ui, body.cp-member-ui.has-shell{background:var(--mu-bg)}
@media(min-width:700px){ body.cp-member-ui{background:linear-gradient(180deg,#F1E8D8 0%,var(--mu-bg) 280px)} }
body.cp-member-ui .app-shell{background:var(--mu-bg)}
body.cp-member-ui .app-shell,
body.cp-member-ui .app{max-width:600px;margin-left:auto;margin-right:auto}

/* ── 品牌頁首:公仔 + 倉老闆 + 頁名 ── */
body.cp-member-ui .topbar,
body.cp-member-ui .hdr,
body.cp-member-ui .header,
body.cp-member-ui .hd{background:var(--mu-card);color:var(--mu-ink);border-bottom:1px solid var(--mu-line);box-shadow:none}
body.cp-member-ui .hdr,
body.cp-member-ui .header,
body.cp-member-ui .hd{
  text-align:left; padding:12px 16px 12px 84px; min-height:72px; position:relative;
  background:var(--mu-card) url(/images/boss-mascot.png) no-repeat 16px 50%/auto 52px;
}
body.cp-member-ui .hdr h1,
body.cp-member-ui .header .brand,
body.cp-member-ui .hd .logo{color:var(--mu-ink);font-size:20px;font-weight:900;letter-spacing:.5px;line-height:1.25}
body.cp-member-ui .hd .logo span{color:var(--mu-brand)}
body.cp-member-ui .hdr p,
body.cp-member-ui .header .tagline,
body.cp-member-ui .hd .sub{color:var(--mu-muted);opacity:1;font-size:14px;margin-top:2px;line-height:1.4}
body.cp-member-ui .hdr>div{color:var(--mu-muted) !important}  /* welcome 頁首小字(原本寫死白字) */
body.cp-member-ui .topbar-logo::before,
body.cp-member-ui .topbar .logo::before{
  content:"";display:inline-block;width:40px;height:44px;flex:none;
  background:url(/images/boss-mascot.png) no-repeat 50% 50%/contain;
}
body.cp-member-ui .topbar-logo,
body.cp-member-ui .topbar .logo{color:var(--mu-ink)}
body.cp-member-ui .topbar-logo span{color:var(--mu-brand)}
body.cp-member-ui .topbar-back,
body.cp-member-ui .line-btn{color:var(--mu-ink);min-height:44px;display:inline-flex;align-items:center}
body.cp-member-ui .topbar-back:hover{background:var(--mu-tint)}
body.cp-member-ui .logo-mark{background:none;width:34px;height:38px;border-radius:0}
body.cp-member-ui .logo-mark svg{display:none}
body.cp-member-ui .logo-mark::before{content:"";display:block;width:100%;height:100%;background:url(/images/boss-mascot.png) no-repeat 50% 50%/contain}
body.cp-member-ui .logo-word{color:var(--mu-ink)}
/* pickup-book:logo 在卡內 */
body.cp-member-ui .wrap>.card>.logo{color:var(--mu-ink);display:flex;align-items:center;justify-content:center;gap:8px}
body.cp-member-ui .wrap>.card>.logo::before{content:"";width:40px;height:44px;background:url(/images/boss-mascot.png) no-repeat 50% 50%/contain}
body.cp-member-ui .wrap>.card>.logo span{color:var(--mu-brand)}

/* ── 卡片 ── */
body.cp-member-ui .card,
body.cp-member-ui .mini-card,
body.cp-member-ui .tn-card,
body.cp-member-ui .search-card,
body.cp-member-ui .info-card,
body.cp-member-ui .sz-card,
body.cp-member-ui .coupon-card,
body.cp-member-ui .pkg,
body.cp-member-ui .ordcard,
body.cp-member-ui .po-order,
body.cp-member-ui .pkg-item,
body.cp-member-ui .guide-card,
body.cp-member-ui .addr-card,
body.cp-member-ui .store-info,
body.cp-member-ui .pkg-info-card,
body.cp-member-ui .pc,
body.cp-member-ui .bizcard,
body.cp-member-ui .plan,
body.cp-member-ui .history-item,
body.cp-member-ui .quote-box{
  background:var(--mu-card);border:1px solid var(--mu-line);border-radius:20px;box-shadow:var(--mu-shadow);
}
body.cp-member-ui .card{padding:20px}
body.cp-member-ui .card-title,
body.cp-member-ui .section-label,
body.cp-member-ui .section-h,
body.cp-member-ui .quote-title{color:var(--mu-ink);font-weight:800}
body.cp-member-ui .container,
body.cp-member-ui .ct{padding-left:16px;padding-right:16px}

/* 暖色提示(原本寫死的淡橘/米黃提示條統一) */
body.cp-member-ui .tn,
body.cp-member-ui .bn,
body.cp-member-ui .holnote,
body.cp-member-ui .cvs-hint,
body.cp-member-ui .sz-tip{background:var(--mu-tint);color:var(--mu-ink);border:1px solid #F2D6B8;border-radius:16px}
body.cp-member-ui .tn .v,
body.cp-member-ui .bn .cd{color:var(--mu-brand)}
body.cp-member-ui .err-box,body.cp-member-ui .err,body.cp-member-ui .error,body.cp-member-ui .error-msg{border-radius:14px}
body.cp-member-ui .ok-box{border-radius:14px}
body.cp-member-ui .hint,
body.cp-member-ui .field-hint,
body.cp-member-ui .sub,
body.cp-member-ui .muted{color:var(--mu-muted)}

/* ── 表單 ── */
body.cp-member-ui label{color:var(--mu-ink);font-weight:700}
body.cp-member-ui input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
body.cp-member-ui select,
body.cp-member-ui textarea{
  font-family:var(--mu-font);font-size:16px;min-height:44px;color:var(--mu-ink);
  background:#fff;border:1.5px solid var(--mu-line);border-radius:12px;
}
body.cp-member-ui input::placeholder,body.cp-member-ui textarea::placeholder{color:#8A93A0}
body.cp-member-ui input:focus-visible,body.cp-member-ui select:focus-visible,body.cp-member-ui textarea:focus-visible,
body.cp-member-ui button:focus-visible,body.cp-member-ui a:focus-visible,body.cp-member-ui summary:focus-visible,
body.cp-member-ui [tabindex]:focus-visible{outline:3px solid var(--mu-accent);outline-offset:2px;border-color:var(--mu-brand)}
body.cp-member-ui input[type=checkbox],body.cp-member-ui input[type=radio]{accent-color:var(--mu-brand)}
body.cp-member-ui input:disabled,body.cp-member-ui select:disabled,body.cp-member-ui textarea:disabled{background:#EFE8DA;color:#8A93A0;cursor:not-allowed}

/* ── 主要按鈕(深橘 #B94700,白字對比 5.3:1) ── */
body.cp-member-ui .btn,
body.cp-member-ui .btn-primary,
body.cp-member-ui .btn-orange,
body.cp-member-ui .btn-submit,
body.cp-member-ui .submit-btn,
body.cp-member-ui .upbtn,
body.cp-member-ui .sb,
body.cp-member-ui .tn-copy-btn,
body.cp-member-ui .cp-btn-primary{
  background:var(--mu-brand);color:#fff;border:none;border-radius:14px;min-height:48px;font-family:var(--mu-font);font-weight:800;font-size:16px;
  box-shadow:0 2px 0 var(--mu-brand-d);
}
body.cp-member-ui .btn:active,body.cp-member-ui .btn-primary:active,body.cp-member-ui .btn-submit:active,
body.cp-member-ui .submit-btn:active,body.cp-member-ui .upbtn:active,body.cp-member-ui .sb:active{background:var(--mu-brand-d)}
body.cp-member-ui .btn:disabled,body.cp-member-ui .btn-primary:disabled,body.cp-member-ui .btn-submit:disabled,
body.cp-member-ui .submit-btn:disabled,body.cp-member-ui .upbtn:disabled,body.cp-member-ui .sb:disabled{background:#CDBFA9;color:#fff;box-shadow:none;cursor:not-allowed;opacity:1}
body.cp-member-ui .btn-secondary,
body.cp-member-ui .ab,
body.cp-member-ui .bulk-btn{background:#fff;color:var(--mu-brand);border:1.5px solid var(--mu-brand);border-radius:14px;min-height:44px;box-shadow:none}
body.cp-member-ui .btn-cancel{border-radius:14px;min-height:44px}

/* 選項/篩選 chip / 分頁 */
body.cp-member-ui .btn-opt,
body.cp-member-ui .pchip,
body.cp-member-ui .pkgchip,
body.cp-member-ui .chips>*,
body.cp-member-ui .pill,
body.cp-member-ui .st-btn,
body.cp-member-ui .btn-pick{background:#fff;border:1.5px solid var(--mu-line);color:var(--mu-ink);border-radius:12px;min-height:44px}
body.cp-member-ui .btn-opt.selected,body.cp-member-ui .btn-opt.on,body.cp-member-ui .btn-opt.active,
body.cp-member-ui .pchip.on,body.cp-member-ui .pkgchip.on,body.cp-member-ui .pkgchip.active,
body.cp-member-ui .chips>.on,body.cp-member-ui .chips>.sel,body.cp-member-ui .st-btn.on,body.cp-member-ui .st-btn.active{
  background:var(--mu-tint);border-color:var(--mu-brand);color:var(--mu-brand);font-weight:800}
body.cp-member-ui .memtab{min-height:44px;color:var(--mu-muted)}
body.cp-member-ui .memtab.on,body.cp-member-ui .memtab.active{color:var(--mu-brand);border-bottom-color:var(--mu-brand)}

/* 狀態標籤:不只靠顏色(文字+底色+細邊) */
body.cp-member-ui .pkg-status,
body.cp-member-ui .po-chip,
body.cp-member-ui .badge{border-radius:999px;font-weight:700;border:1px solid currentColor}

/* 數字卡 */
body.cp-member-ui .balance-card,
body.cp-member-ui .hero{border-radius:20px}
body.cp-member-ui .balance-card{background:var(--mu-ink);color:#fff;box-shadow:var(--mu-shadow)}
body.cp-member-ui .balance-amount,body.cp-member-ui #balanceNum{font-size:34px;font-weight:900;color:#fff}
body.cp-member-ui .hero{background:var(--mu-tint);color:var(--mu-ink);box-shadow:var(--mu-shadow);border:1px solid #F2D6B8}
body.cp-member-ui .hero h1{color:var(--mu-ink)}
body.cp-member-ui .hero h1 em{color:var(--mu-brand);font-style:normal}
body.cp-member-ui .hero p{color:var(--mu-muted)}

/* 彈窗 / sheet */
body.cp-member-ui .sheet,body.cp-member-ui .modal{background:var(--mu-card);border-radius:24px 24px 0 0}
body.cp-member-ui .sheet-title,body.cp-member-ui .modal h2,body.cp-member-ui .modal h3{color:var(--mu-ink)}
body.cp-member-ui .sheet-close{min-width:44px;min-height:44px}
body.cp-member-ui .toast{background:var(--mu-ink);color:#fff;border-radius:14px}

/* 空狀態 / 載入 / 錯誤 */
body.cp-member-ui .empty,body.cp-member-ui .po-empty,body.cp-member-ui .empty-p{color:var(--mu-muted)}
body.cp-member-ui .loading,body.cp-member-ui .po-loading,body.cp-member-ui .ld{color:var(--mu-muted)}
body.cp-member-ui .spinner,body.cp-member-ui .spin{border-top-color:var(--mu-brand)}

/* 連結 */
body.cp-member-ui .privacy a,body.cp-member-ui .hint a,body.cp-member-ui .error a{color:var(--mu-brand)}

/* 時間軸(track) */
body.cp-member-ui .tl-dot{background:var(--mu-brand)}
body.cp-member-ui .tl-line{background:var(--mu-line)}
body.cp-member-ui .tl-title{color:var(--mu-ink)}
body.cp-member-ui .tl-time{color:var(--mu-muted)}

/* 手機:避免橫向溢出;200% 字級時長字串換行 */
body.cp-member-ui{overflow-wrap:anywhere;-webkit-text-size-adjust:100%}
body.cp-member-ui img,body.cp-member-ui table{max-width:100%}
@media(max-width:380px){ body.cp-member-ui .card{padding:16px} }
@media(prefers-reduced-motion:reduce){ body.cp-member-ui *{animation-duration:.01ms !important;transition-duration:.01ms !important} }