/* =====================================================================
   陽光俱樂部 — 前台樣式（Mobile First / 390×844 基準）
   主色 陽光橘 #FF8A00 · 輔色 金黃 #FFC107 · 文字 深咖 #4A3728
   ===================================================================== */

:root{
  --sun-50:#FFF6E9; --sun-100:#FFEBCC; --sun-200:#FFD79A;
  --sun-300:#FFBE63; --sun-400:#FFA333; --sun-500:#FF8A00;
  --sun-600:#F57000; --sun-700:#D65C00;
  --gold:#FFC107; --gold-l:#FFD54F; --gold-d:#F9A825;

  --ink:#4A3728; --ink-2:#6E5B4C; --muted:#9B8B7C; --faint:#C3B5A7;
  --bg:#FFFBF4; --card:#FFFFFF; --line:#F2E8DA; --line-2:#EADDCB;

  --ok:#2E9E5B; --warn:#E8A317; --danger:#E14B4B; --info:#3B86D8;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;
  --sh-1:0 1px 3px rgba(120,80,30,.06), 0 1px 2px rgba(120,80,30,.04);
  --sh-2:0 4px 16px rgba(160,105,30,.10);
  --sh-3:0 10px 30px rgba(160,105,30,.16);
  --grad:linear-gradient(135deg,#FFB03A 0%,#FF8A00 55%,#F57000 100%);
  --grad-soft:linear-gradient(135deg,#FFF3DF 0%,#FFE7C4 100%);
  --nav-h:62px;
  --wrap:480px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:.2px}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- 版面骨架 ---------- */
.app{max-width:var(--wrap);margin:0 auto;min-height:100vh;background:var(--bg);
     box-shadow:0 0 40px rgba(160,110,40,.07);position:relative;overflow-x:hidden}
.app-body{padding:0 0 calc(var(--nav-h) + 26px)}
.app-body.no-nav{padding-bottom:26px}
.sec{padding:0 16px;margin-top:18px}
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sec-hd h3{font-size:17px}
.sec-hd .more{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:2px}
.sec-sub{font-size:12.5px;color:var(--muted);margin-top:-4px;margin-bottom:10px}

/* ---------- 頂部列 ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:56px}
.topbar .logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px;color:var(--sun-600)}
.topbar .logo img{height:30px;width:auto}
/* 上傳的橫式品牌 LOGO：等比縮放、限制最大寬避免擠壓右側圖示 */
.topbar .logo img.brandmark{height:32px;width:auto;max-width:min(190px,46vw);object-fit:contain}
.topbar .spacer{flex:1}
.icon-btn{position:relative;width:38px;height:38px;border-radius:12px;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.icon-btn:active{background:var(--sun-50)}
.icon-btn .dot{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.topbar-back{font-size:20px;line-height:1;padding:0 4px}
.topbar h1{font-size:16.5px;font-weight:800}

/* ---------- 搜尋 ---------- */
.searchbar{padding:10px 16px 2px}
.searchbar form{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-2);
  border-radius:999px;padding:9px 14px;box-shadow:var(--sh-1)}
.searchbar input{flex:1;border:0;outline:0;background:transparent;font-size:14px}
.searchbar input::placeholder{color:var(--faint)}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;box-shadow:var(--sh-1)}
.card + .card{margin-top:12px}
.card-flat{background:var(--card);border-radius:var(--r-lg);padding:14px}

/* ---------- 會員資訊卡 ---------- */
.mecard{margin:14px 16px 0;background:linear-gradient(135deg,#FFFDF8,#FFF4E2);
  border:1px solid var(--sun-100);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-2);position:relative;overflow:hidden}
.mecard::after{content:"";position:absolute;right:-40px;top:-50px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,193,7,.28),transparent 68%)}
.mecard .row1{display:flex;align-items:center;gap:10px;position:relative}
.mecard .hi{font-size:16px;font-weight:800}
.mecard .sub{font-size:12px;color:var(--muted);margin-top:1px}
.mecard .avatar{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:17px;box-shadow:var(--sh-2);flex:none}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;position:relative}
.stat3 > div{text-align:center;padding:2px 4px;position:relative}
.stat3 > div + div::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--line-2)}
.stat3 .k{font-size:11.5px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:4px}
.stat3 .v{font-size:18px;font-weight:900;color:var(--sun-600);margin-top:2px;letter-spacing:-.3px}
.stat3 .v.gold{color:var(--gold-d)}
.rank-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:999px;background:var(--sun-500);color:#fff}

/* ---------- Banner ---------- */
.banner-wrap{margin:14px 16px 0;position:relative}
.banner-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.banner-track::-webkit-scrollbar{display:none}
.banner{flex:0 0 100%;scroll-snap-align:center;border-radius:var(--r-xl);padding:20px 18px;min-height:150px;
  background:var(--grad);color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-3)}
.banner.has-img{padding:0;min-height:160px}
.banner.has-img img{width:100%;height:100%;min-height:160px;object-fit:cover}
.banner::before{content:"";position:absolute;right:-60px;top:-70px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.30),transparent 66%)}
.banner::after{content:"";position:absolute;left:-40px;bottom:-70px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 66%)}
.banner h2{font-size:22px;line-height:1.3;position:relative;text-shadow:0 1px 6px rgba(150,80,0,.25)}
.banner p{font-size:13.5px;opacity:.95;margin-top:6px;position:relative}
.banner .acts{display:flex;gap:8px;margin-top:14px;position:relative;flex-wrap:wrap}
.banner .acts .btn{box-shadow:0 3px 10px rgba(120,60,0,.2)}
.dots{display:flex;gap:6px;justify-content:center;margin-top:9px}
.dots i{width:6px;height:6px;border-radius:99px;background:var(--sun-200);transition:.25s}
.dots i.on{width:18px;background:var(--sun-500)}

/* ---------- 按鈕 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:700;transition:.16s;white-space:nowrap;
  background:#fff;color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(255,138,0,.32)}
.btn-gold{background:linear-gradient(135deg,var(--gold-l),var(--gold-d));color:#513B00}
.btn-ghost{background:rgba(255,255,255,.92);color:var(--sun-600)}
.btn-line{background:#fff;border:1.5px solid var(--sun-300);color:var(--sun-600)}
.btn-soft{background:var(--sun-50);color:var(--sun-600)}
.btn-grey{background:#F2EEE8;color:var(--ink-2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-block{display:flex;width:100%}
.btn-sm{padding:6px 13px;font-size:12.5px}
.btn-lg{padding:13px 24px;font-size:15.5px}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}

/* ---------- 功能捷徑 ---------- */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 4px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 8px;box-shadow:var(--sh-1)}
.quick a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;border-radius:14px}
.quick a:active{background:var(--sun-50)}
.quick .ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:21px;
  background:var(--sun-50);color:var(--sun-600);box-shadow:inset 0 -2px 6px rgba(255,170,60,.14)}
.quick span{font-size:11.5px;color:var(--ink-2);font-weight:600}

/* ---------- 我的幸福幣 ---------- */
.coinbox{display:grid;grid-template-columns:1fr;gap:12px}
.cb-main{background:var(--grad);color:#fff;border-radius:var(--r-lg);padding:18px 18px 16px;
  position:relative;overflow:hidden;box-shadow:var(--sh-3)}
.cb-main::after{content:"";position:absolute;right:-50px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 68%)}
.cb-label{font-size:12.5px;opacity:.92;position:relative}
.cb-value{font-size:38px;font-weight:900;line-height:1.1;letter-spacing:-1px;margin-top:2px;position:relative;
  text-shadow:0 2px 10px rgba(140,70,0,.22)}
.cb-unit{font-size:14px;font-weight:700;opacity:.9;margin-left:5px;letter-spacing:0}
.cb-sub{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;opacity:.92;margin-top:6px;position:relative}
.cb-sub span{display:inline-flex;align-items:center;gap:4px}
.cb-sub span::before{content:"";width:4px;height:4px;border-radius:99px;background:rgba(255,255,255,.75)}
.cb-acts{display:flex;gap:8px;margin-top:14px;position:relative;flex-wrap:wrap}
.cb-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cb-mini{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;
  box-shadow:var(--sh-1);display:block}
.cb-mini:active{background:var(--sun-50)}
.cb-mini .k{font-size:11.5px;color:var(--muted);font-weight:700}
.cb-mini .v{font-size:19px;font-weight:900;color:var(--sun-600);margin-top:2px;letter-spacing:-.4px}
.cb-mini .d{font-size:10.5px;color:var(--faint);margin-top:2px}
.coinbox.guest .cb-main{background:linear-gradient(135deg,#FFC85C,#FF9A1F 60%,#F57000)}

/* ---------- 錢包磚（會員中心 / 申請提領 / 組織成員頁共用）----------
   數量會隨啟用的錢包種類自動增減，不寫死欄數 */
.wallets,.points4{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px}
.pt{display:block;border-radius:var(--r);padding:11px 9px;text-align:center;
  border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);
  color:var(--sun-600);transition:.15s}
a.pt:active{transform:scale(.98)}
.pt .n{font-size:12.5px;font-weight:800;line-height:1.3;color:inherit;opacity:.9}
.pt .v{font-size:18px;font-weight:900;margin-top:3px;letter-spacing:-.3px;color:inherit;
  font-variant-numeric:tabular-nums;line-height:1.2}
.pt .d{font-size:10.5px;margin-top:2px;color:inherit;opacity:.62}

/* 桌機並排欄位 */
.cols2{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}

/* ---------- 商品 ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);
  display:flex;flex-direction:column}
.pcard .thumb{aspect-ratio:1/1;background:var(--sun-50);position:relative;overflow:hidden}
.pcard .thumb img{width:100%;height:100%;object-fit:cover}
.pcard .thumb .ph{width:100%;height:100%;display:grid;place-items:center;font-size:34px;color:var(--sun-200)}
.pcard .tag{position:absolute;left:7px;top:7px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:999px}
.pcard .bd{padding:9px 10px 11px;flex:1;display:flex;flex-direction:column}
.pcard .nm{font-size:13.5px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.pcard .pr{margin-top:6px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pcard .pr b{color:var(--sun-600);font-size:16px;font-weight:900}
.pcard .pr s{color:var(--faint);font-size:11.5px}
.pcard .coin{font-size:11px;color:var(--gold-d);font-weight:700;margin-top:3px}
.pcard .add{margin-top:8px}
.hscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll .pcard{flex:0 0 46%}

/* ---------- 組織摘要 ---------- */
.orgbox{background:linear-gradient(135deg,#FFFDF9,#FFF6EA);border:1px solid var(--sun-100)}
.org3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;text-align:center}
.org3 > div{background:#fff;border-radius:var(--r-sm);padding:9px 4px;border:1px solid var(--line)}
.org3 .v{font-size:19px;font-weight:900;color:var(--sun-600)}
.org3 .k{font-size:11px;color:var(--muted)}

/* ---------- 邀請卡 ---------- */
.invite{margin:0;background:var(--grad);color:#fff;border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--sh-3);position:relative;overflow:hidden}
.invite::after{content:"";position:absolute;right:-50px;bottom:-60px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.25),transparent 68%)}
.invite h3{font-size:17px;position:relative}
.invite p{font-size:12.5px;opacity:.94;margin-top:5px;position:relative}
.invite .acts{display:flex;gap:8px;margin-top:12px;position:relative;flex-wrap:wrap}
.code-box{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.2);border:1px dashed rgba(255,255,255,.6);
  border-radius:12px;padding:9px 12px;margin-top:10px;position:relative}
.code-box b{font-size:18px;letter-spacing:2px;font-weight:900}

/* ---------- 列表 ---------- */
.list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.li{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .ico{width:38px;height:38px;border-radius:11px;background:var(--sun-50);color:var(--sun-600);
  display:grid;place-items:center;font-size:17px;flex:none}
.li .main{flex:1;min-width:0}
.li .t{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .s{font-size:11.5px;color:var(--muted);margin-top:2px}
.li .r{text-align:right;flex:none}
.li .r b{font-size:15px;font-weight:900}
.li .r .s{font-size:11px}
.plus{color:var(--ok)} .minus{color:var(--danger)}

/* ---------- 表格（明細） ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
table.tbl th{background:var(--sun-50);color:var(--ink-2);font-weight:700;text-align:left;
  padding:9px 10px;white-space:nowrap;font-size:12px;border-bottom:1px solid var(--line)}
table.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 標籤 ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:2.5px 9px;border-radius:999px;background:var(--sun-50);color:var(--sun-600);white-space:nowrap}
.badge.grey{background:#F1EDE8;color:var(--ink-2)}
.badge.ok{background:#E6F6EC;color:var(--ok)}
.badge.warn{background:#FFF6E0;color:#B5820B}
.badge.danger{background:#FDECEC;color:var(--danger)}
.badge.info{background:#E8F1FC;color:var(--info)}
.badge.dot::before{content:"";width:5px;height:5px;border-radius:99px;background:currentColor}

/* ---------- 表單 ---------- */
.field{margin-bottom:13px}
.field > label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.inp,select.inp,textarea.inp{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:12px;
  background:#fff;outline:0;transition:.15s;font-size:14.5px}
.inp:focus{border-color:var(--sun-400);box-shadow:0 0 0 3px rgba(255,138,0,.13)}
textarea.inp{min-height:96px;resize:vertical}
select.inp{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239B8B7C' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.inp-group{display:flex;gap:8px}
.inp-group .inp{flex:1}
.check{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.check input{margin-top:3px;accent-color:var(--sun-500);width:16px;height:16px}
.radio-cards{display:grid;gap:10px}
.radio-card{border:1.5px solid var(--line-2);border-radius:var(--r);padding:12px 14px;cursor:pointer;
  display:flex;gap:10px;align-items:flex-start;transition:.15s;background:#fff}
.radio-card input{margin-top:3px;accent-color:var(--sun-500)}
.radio-card.on,.radio-card:has(input:checked){border-color:var(--sun-400);background:var(--sun-50);
  box-shadow:0 0 0 3px rgba(255,138,0,.1)}

/* ---------- 底部導覽 ---------- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--wrap);
  height:var(--nav-h);background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);z-index:60;
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--faint);font-size:11px;font-weight:600}
.tabbar a .ic{font-size:20px;line-height:1}
.tabbar a.on{color:var(--sun-500)}
.tabbar a.on .ic{transform:translateY(-1px)}

/* ---------- 浮動列（結帳等） ---------- */
.dockbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--wrap);
  background:#fff;border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;z-index:61;box-shadow:0 -4px 20px rgba(150,100,40,.08)}
.dockbar .sum{flex:1;min-width:0}
.dockbar .sum .k{font-size:11px;color:var(--muted)}
.dockbar .sum .v{font-size:18px;font-weight:900;color:var(--sun-600)}

/* ---------- 提示 ---------- */
.flash-wrap{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:200;width:calc(100% - 28px);max-width:452px}
.flash{background:#fff;border-radius:14px;padding:11px 14px;box-shadow:var(--sh-3);display:flex;gap:9px;
  align-items:center;font-size:13.5px;font-weight:600;margin-bottom:8px;border-left:4px solid var(--sun-500);
  animation:slideDown .3s ease}
.flash.success{border-left-color:var(--ok);color:#1E7B44}
.flash.error{border-left-color:var(--danger);color:#B93030}
@keyframes slideDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

.alert{border-radius:var(--r);padding:11px 13px;font-size:13px;display:flex;gap:8px;align-items:flex-start}
.alert.info{background:#EEF5FD;color:#265C97}
.alert.warn{background:#FFF7E6;color:#8A6208}
.alert.err{background:#FDEDED;color:#A73333}
.alert.ok{background:#EAF7EF;color:#1E7B44}

/* ---------- 空狀態 ---------- */
.empty{text-align:center;padding:52px 20px;color:var(--muted)}
.empty-ico{font-size:44px;margin-bottom:10px;opacity:.75}
.empty h3{font-size:16px;color:var(--ink-2);margin-bottom:5px}
.empty p{font-size:13px;margin-bottom:16px}

/* ---------- 分頁 ---------- */
.pager{display:flex;gap:5px;justify-content:center;margin:16px 0;flex-wrap:wrap}
.pager .pg{min-width:34px;height:34px;padding:0 9px;border-radius:10px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-2)}
.pager .pg.active{background:var(--sun-500);border-color:var(--sun-500);color:#fff}
.pager .pg.disabled{opacity:.4}
.pager .pg.dots{border:0;background:transparent}

/* ---------- 步驟軸 ---------- */
.steps{display:flex;flex-direction:column;gap:0;position:relative;padding-left:6px}
.step{display:flex;gap:11px;position:relative;padding-bottom:15px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:8px;top:19px;bottom:0;width:2px;background:var(--line-2)}
.step:last-child::before{display:none}
.step .dot{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--line-2);flex:none;z-index:1;margin-top:2px}
.step.done .dot{background:var(--sun-500);border-color:var(--sun-500)}
.step .txt{flex:1;min-width:0}
.step .txt b{font-size:13.5px}
.step .txt span{display:block;font-size:11.5px;color:var(--muted)}

/* ---------- 組織樹 ---------- */
.tree{font-size:13.5px}
.tree .node{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;background:#fff;
  border:1px solid var(--line);margin-bottom:7px}
.tree .node .av{width:32px;height:32px;border-radius:50%;background:var(--sun-50);color:var(--sun-600);
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.tree .lv{display:inline-block;font-size:10px;padding:1px 6px;border-radius:99px;background:#F1EDE8;color:var(--muted)}

/* ---------- 後台輸入的 HTML 內容（商品描述 / 消息內文）----------
   全域把 ul 的項目符號關掉了，這裡要還原成正常排版 */
.rich-text{font-size:14.5px;line-height:1.85;color:var(--ink-2);word-break:break-word}
.rich-text > :first-child{margin-top:0}
.rich-text > :last-child{margin-bottom:0}
.rich-text p{margin:0 0 .9em}
.rich-text h1,.rich-text h2,.rich-text h3,.rich-text h4{margin:1.4em 0 .6em;color:var(--ink);line-height:1.4}
.rich-text h1{font-size:21px}.rich-text h2{font-size:19px}
.rich-text h3{font-size:17px}.rich-text h4{font-size:15.5px}
.rich-text ul,.rich-text ol{margin:0 0 .9em;padding-left:1.5em;list-style:revert}
.rich-text ul{list-style:disc}
.rich-text ol{list-style:decimal}
.rich-text li{margin:.25em 0}
.rich-text img{max-width:100%;height:auto;border-radius:10px;margin:.6em 0}
.rich-text a{color:var(--sun-600);text-decoration:underline}
.rich-text strong,.rich-text b{color:var(--ink);font-weight:800}
.rich-text blockquote{margin:.9em 0;padding:10px 14px;border-left:3px solid var(--sun-300);
  background:var(--sun-50);border-radius:0 10px 10px 0;color:var(--ink-2)}
.rich-text hr{border:0;border-top:1px solid var(--line);margin:1.2em 0}
.rich-text table{width:100%;border-collapse:collapse;margin:.9em 0;font-size:13.5px;display:block;overflow-x:auto}
.rich-text th,.rich-text td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.rich-text th{background:var(--sun-50);font-weight:700}
.rich-text iframe,.rich-text video{max-width:100%;border-radius:10px}
.rich-text code{background:#F5EFE6;padding:2px 6px;border-radius:5px;font-size:13px}

/* ---------- 其他 ---------- */
.muted{color:var(--muted)}
.small{font-size:12px}
.tc{text-align:center} .tr{text-align:right}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}.mt20{margin-top:20px}
.row{display:flex;align-items:center;gap:8px}
.row.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.divider{height:1px;background:var(--line);margin:12px 0}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px}
.kv .k{color:var(--muted);flex:none}
.kv .v{font-weight:600;text-align:right;word-break:break-all}
.kv.total{border-top:1px dashed var(--line-2);margin-top:6px;padding-top:10px}
.kv.total .v{font-size:18px;font-weight:900;color:var(--sun-600)}
.sticky-sub{position:sticky;top:56px;z-index:40;background:var(--bg);padding:10px 16px;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line-2);
  font-size:12.5px;font-weight:600;color:var(--ink-2)}
.chip.on{background:var(--sun-500);border-color:var(--sun-500);color:#fff}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:#fff}
.qty button{width:30px;height:30px;border:0;background:transparent;font-size:16px;color:var(--sun-600);cursor:pointer}
.qty input{width:38px;text-align:center;border:0;outline:0;font-size:14px;font-weight:700}
.skel{background:linear-gradient(90deg,#F5EEE5 25%,#FBF6EF 37%,#F5EEE5 63%);background-size:400% 100%;
  animation:sk 1.3s ease infinite;border-radius:8px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 桌機專屬元素：預設隱藏，≥900px 才出現 */
.topnav,.sitefoot{display:none}
.topbar-in{display:flex;align-items:center;gap:10px;width:100%;min-width:0}

/* 登入 / 註冊表單在寬螢幕不要被拉開
   （父層是 flex column，auto margin 會讓元素縮成內容寬，故需補 width:100%） */
@media (min-width:520px){
  body.page-login .sec,
  body.auth-page .sec{width:100%;max-width:430px;margin-left:auto;margin-right:auto;align-self:center}
}

/* ===================================================================
   平板 520 ~ 899px
   =================================================================== */
@media (min-width:520px) and (max-width:899px){
  :root{--wrap:560px}
  .app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .grid2{grid-template-columns:repeat(3,1fr)}
  .hscroll .pcard{flex:0 0 31%}
  .cb-value{font-size:42px}
}

/* ===================================================================
   桌機 ≥ 900px
   —— 版面由「手機直式」切換為「置中寬版 + 頂部橫向選單」
   =================================================================== */
@media (min-width:900px){
  :root{--wrap:1160px;--nav-h:0px}

  body{background:linear-gradient(180deg,#FFFBF4 0%,#FFF6E9 100%)}
  .app{max-width:none;box-shadow:none;background:transparent;border:0}
  .app-body{max-width:var(--wrap);margin:0 auto;padding:6px 0 70px}
  .app-body.no-nav{padding-bottom:70px}

  /* ---- 頂部列：全寬底色 + 內容置中 ---- */
  .topbar{padding:0 26px;min-height:70px;border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.96);box-shadow:0 1px 12px rgba(160,110,40,.05)}
  .topbar-in{max-width:var(--wrap);margin:0 auto;width:100%;display:flex;align-items:center;gap:14px;min-height:70px}
  .topbar .logo img{height:38px;width:38px}
  .topbar .logo img.brandmark{height:42px;width:auto;max-width:230px}
  .topbar .logo b{font-size:19px}
  .topbar .logo i{font-size:9.5px}
  /* 內頁標題接在 LOGO 之後，用細線分隔 */
  .topbar h1{font-size:16px;font-weight:700;color:var(--ink-2);
    padding-left:14px;border-left:1px solid var(--line-2);white-space:nowrap}
  .topbar-back{display:none}
  .icon-btn{width:42px;height:42px}
  .icon-btn:hover{background:var(--sun-50)}

  /* ---- 桌機橫向主選單（手機隱藏） ---- */
  .topnav{display:flex;gap:2px;margin-left:10px}
  .topnav a{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
    font-size:14.5px;font-weight:700;color:var(--ink-2);transition:.15s;white-space:nowrap}
  .topnav a:hover{background:var(--sun-50);color:var(--sun-600)}
  .topnav a.on{background:var(--sun-500);color:#fff;box-shadow:0 3px 10px rgba(255,138,0,.3)}
  .topnav a svg{width:18px;height:18px}
  .tabbar{display:none}

  /* ---- 區塊間距放大 ---- */
  .sec{padding:0 26px;margin-top:26px}
  .sec-hd{margin-bottom:14px}
  .sec-hd h3{font-size:20px}
  .sec-hd .more{font-size:13.5px}
  .sec-hd .more:hover{color:var(--sun-600)}

  /* ---- 會員卡：橫向鋪開 ---- */
  .mecard{margin:22px 26px 0;padding:20px 24px;display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center}
  .mecard .row1{grid-column:1}
  .mecard .hi{font-size:20px}
  .mecard .stat3{grid-column:2;margin-top:0}
  .mecard .stat3 .v{font-size:22px}
  .mecard > .row.between{grid-column:1 / -1;margin-top:4px}
  .mecard .avatar{width:52px;height:52px;font-size:20px}
  .mecard.guest{display:block}

  /* ---- Banner ---- */
  .banner-wrap{margin:22px 26px 0}
  .banner{min-height:250px;padding:38px 40px;border-radius:24px}
  .banner.has-img,.banner.has-img img{min-height:250px}
  .banner h2{font-size:34px;max-width:60%}
  .banner p{font-size:16px;max-width:56%;margin-top:10px}
  .banner .acts{margin-top:20px}
  .banner .acts .btn{padding:12px 24px;font-size:15px}
  .dots{margin-top:12px}

  /* ---- 功能捷徑：一排八個 ---- */
  .quick{grid-template-columns:repeat(8,1fr);padding:20px 14px;gap:4px}
  .quick .ico{width:54px;height:54px;font-size:24px;transition:.18s}
  .quick a:hover{background:var(--sun-50)}
  .quick a:hover .ico{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,150,40,.22)}
  .quick span{font-size:12.5px}

  /* ---- 幸福幣專區：主卡 + 側欄 ---- */
  .coinbox{grid-template-columns:1.5fr 1fr;gap:16px}
  .cb-main{padding:26px 28px}
  .cb-value{font-size:50px}
  .cb-unit{font-size:17px}
  .cb-label{font-size:14px}
  .cb-sub{font-size:12.5px;margin-top:8px}
  .cb-side{grid-template-columns:1fr;gap:16px}
  .cb-mini{padding:16px 18px;transition:.15s}
  .cb-mini:hover{border-color:var(--sun-300);box-shadow:var(--sh-2);transform:translateY(-1px)}
  .cb-mini .v{font-size:24px}
  .coinbox.guest{grid-template-columns:1fr}

  /* ---- 錢包磚：固定寬度靠左排，不隨容器拉長 ---- */
  .wallets,.points4{grid-template-columns:repeat(auto-fill,minmax(200px,220px));justify-content:start;gap:14px}
  .pt{padding:16px 16px;text-align:left}
  .pt:hover{border-color:currentColor;box-shadow:var(--sh-2);transform:translateY(-1px)}
  .pt .n{font-size:13px}
  .pt .v{font-size:24px;margin-top:4px}
  .pt .d{font-size:11.5px}

  /* ---- 兩欄區 ---- */
  .cols2{grid-template-columns:1fr 1fr;gap:22px}

  /* ---- 商品格：一排四個 ---- */
  .grid2{grid-template-columns:repeat(4,1fr);gap:18px}
  .pcard{transition:.18s}
  .pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--sun-200)}
  .pcard .nm{font-size:14.5px;min-height:42px}
  .pcard .bd{padding:12px 13px 14px}
  .hscroll{overflow:visible;display:grid;grid-template-columns:repeat(4,1fr)}
  .hscroll .pcard{flex:initial}

  /* ---- 列表 / 表格 ---- */
  .list .li{padding:14px 18px}
  .li:hover{background:#FFFCF6}
  .li .t{font-size:15px}
  table.tbl{font-size:13.5px;min-width:0}
  table.tbl th,table.tbl td{padding:11px 14px}

  /* ---- 卡片 / 表單 ---- */
  .card{padding:18px 20px}
  .invite{padding:22px 24px}
  .invite h3{font-size:19px}
  .code-box b{font-size:22px}
  .org3 .v{font-size:22px}
  .btn:hover{filter:brightness(1.04)}
  .field > label{font-size:13px}
  .inp{padding:12px 14px}

  /* 登入 / 註冊等窄表單置中 */
  .narrow{max-width:460px;margin-left:auto;margin-right:auto}

  /* ---- 底部浮動列跟著置中 ---- */
  .dockbar{max-width:var(--wrap);border-radius:18px 18px 0 0;padding:14px 26px;
    box-shadow:0 -6px 30px rgba(150,100,40,.12)}
  .dockbar .btn{padding:12px 26px;font-size:15px}

  /* ---- 桌機頁尾 ---- */
  .sitefoot{display:block;margin-top:44px;border-top:1px solid var(--line);background:#fff}
  .sitefoot .in{max-width:var(--wrap);margin:0 auto;padding:26px;display:flex;gap:26px;
    align-items:flex-start;flex-wrap:wrap;font-size:13px;color:var(--muted)}
  .sitefoot .brand{display:flex;align-items:center;gap:10px;min-width:220px}
  .sitefoot .brand img{width:38px;height:38px}
  .sitefoot .brand b{display:block;color:var(--sun-600);font-size:16px}
  .sitefoot nav{display:flex;gap:18px;flex-wrap:wrap}
  .sitefoot nav a:hover{color:var(--sun-600)}
  .sitefoot .cr{margin-left:auto;text-align:right;font-size:12px;color:var(--faint)}

  .sticky-sub{top:70px;padding:12px 26px}
  .searchbar{padding:14px 26px 0;max-width:640px}
  .empty{padding:70px 20px}
}

@media (min-width:1240px){
  .banner h2{font-size:38px}
  .cb-value{font-size:56px}
}

@media print{
  .topbar,.tabbar,.dockbar,.flash-wrap,.sitefoot{display:none!important}
  .app{max-width:none;box-shadow:none}
}