/* Muajee storefront UI — extracted from muajee-app.html prototype */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;800&display=swap");

:root{
    /* 主色：溫潤咖啡棕，暖色調米色系，長期閱讀舒服耐看，不容易看膩 */
    --primary: #222428;
    --primary-dark: #3a3d43;
    --primary-light: #7a7d83;
    /* 點綴色：柔和的暖陶土色，用在少數需要強調的地方（星級、精選標記），不氾濫使用 */
    --accent: #5f646c;
    --accent-dark: #5f646c;
    /* 背景維持米白色，跟咖啡棕搭配起來是常見的溫暖、質感品牌配色 */
    --bg-page: #f5f5f3;
    --bg-card: #ffffff;
    --border: #e4e4e1;
    --border-strong: #cdcecb;
    --text-main: #222428;
    --text-sub: #7a7d83;
    --text-placeholder: #ada090;
    --link: #222428;
    /* 狀態徽章：成功／進行中用主色系表達，取消／未到期用中性灰階，不使用突兀的紅綠色相 */
    --success-bg: #222428;
    --success-text: #ffffff;
    --danger-bg: #ececea;
    --danger-text: #7a7d83;
    --radius: 8px;
    --font: "Noto Sans TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif;
    /* 陰影系統：柔和多層次陰影取代死板的 1px 硬邊框，質感明顯提升 */
    --shadow-xs: 0 1px 2px rgba(20,16,10,.05);
    --shadow-sm: 0 1px 3px rgba(20,16,10,.08), 0 1px 2px rgba(20,16,10,.05);
    --shadow-md: 0 6px 16px rgba(20,16,10,.09), 0 2px 6px rgba(20,16,10,.05);
    --shadow-lg: 0 16px 40px rgba(20,16,10,.14), 0 4px 10px rgba(20,16,10,.06);
    /* 日曆專用顏色（只用在「有預約／可預約」與「無預約／不可預約」的日期狀態上，
       不影響其他徽章與元件，避免全站色相規則被打亂）：
       有預約／可預約＝高飽和淡綠色，無預約／不可預約＝淺灰色，全站所有日曆統一套用這兩色。 */
    --cal-active-bg: #dff3e6;
    --cal-active-text: #1c8a52;
    --cal-empty-bg: #ececec;
    --cal-empty-text: #8a8a8a;
  }
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; max-width:100%; }
  body{
    font-family: var(--font);
    background: var(--bg-page);
    color: var(--text-main);
    font-size:15px;
    line-height: 1.6;
    overflow-x: hidden;
  }
  a{ color: var(--link); text-decoration:none; }
  a:hover{ text-decoration: underline; }
  button{ font-family: inherit; }

  /* ---------- Header ---------- */
  header.site-header{
    background:#fff; border-bottom:1px solid var(--border);
    position: sticky; top:0; z-index: 100;
    box-shadow: 0 1px 0 rgba(30,38,32,.03), 0 2px 10px rgba(30,38,32,.04);
  }
  .header-inner{
    max-width: 1400px; margin:0 auto; padding: 14px 24px;
    display:flex; align-items:center; gap: 20px;
  }
  .logo{
    display:flex; align-items:center; gap:8px;
    font-size:23px; font-weight: 800; color: var(--text-main);
    white-space: nowrap; flex-shrink: 0; cursor:pointer; border:none; background:none; padding:0;
  }
  .logo .logo-mark{
    width:28px;height:28px; background: var(--primary); color:#fff; border-radius: 6px;
    display:flex;align-items:center;justify-content:center; font-size:16px; font-weight: 800; flex-shrink:0;
  }
  .header-search{ flex:1; position: relative; max-width: none; }
  .header-search input{
    width:100%; padding: 9px 40px 9px 14px; border: 1px solid var(--border); border-radius: 20px;
    font-size:14.5px; font-family: inherit; outline: none; background: #fafafa;
  }
  .seller-mode .header-search input{ padding-right: 76px; } /* 讓出雙放大鏡切換的空間 */
  .header-search input:focus{ border-color:#bbb; background:#fff; }
  .header-search svg.search-default-icon{ position:absolute; right:14px; top:50%; transform: translateY(-50%); color:#888; }
  .header-actions{ display:flex; align-items:center; gap: 16px; flex-shrink:0; }
  .icon-btn{
    position:relative; display:flex;align-items:center;justify-content:center;
    width:22px;height:22px; color: var(--text-main); cursor:pointer; background:none; border:none; padding:0;
    transition: color .15s ease, transform .15s ease;
  }
  .icon-btn:hover{ color: var(--primary); transform: translateY(-1px); }
  .icon-btn .dot{ position:absolute; top:-3px; right:-3px; width:7px;height:7px;background:var(--accent-dark);border-radius:50%; }
  .icon-btn .cart-count-badge{
    position:absolute; top:-8px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
    background:var(--primary); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center;
  }
  .avatar-btn{
    width:34px;height:34px; border-radius:50%; background:var(--primary); color:#fff;
    display:flex;align-items:center;justify-content:center; font-size:14.5px; font-weight:800;
    border:none; cursor:pointer; flex-shrink:0; box-shadow: var(--shadow-xs); transition: box-shadow .15s ease;
  }
  .avatar-btn:hover{ box-shadow: var(--shadow-sm); }
  .avatar-wrap{ position:relative; flex-shrink:0; }
  /* 未登入時 header 顯示的「註冊／登入」膠囊按鈕，取代頭像；登入後這組按鈕隱藏、改顯示頭像下拉選單 */
  .header-auth-btns{ display:flex; gap:8px; flex-shrink:0; }
  .header-auth-btn{
    padding:9px 20px; border-radius:999px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer;
    white-space:nowrap; transition: all .15s ease;
  }
  .header-auth-btn.solid{ background:var(--primary); border:1.5px solid var(--primary); color:#fff; }
  .header-auth-btn.solid:hover{ background:var(--primary-dark); }
  .header-auth-btn.outline{ background:#fff; border:1.5px solid var(--border-strong); color:var(--text-main); }
  .header-auth-btn.outline:hover{ border-color:var(--primary); color:var(--primary); }
  .avatar-dropdown{
    display:none;
    position:absolute; top:calc(100% + 10px); right:0;
    min-width:170px;
    background:#fff; border:1px solid var(--border); border-radius:10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
    overflow:hidden; z-index:200;
  }
  .avatar-dropdown.show{ display:block; }
  .avatar-dropdown a{
    display:block; padding:13px 18px; font-size:14.5px; font-weight:600;
    color:var(--text-main); text-decoration:none;
  }
  .avatar-dropdown a:hover{ background:#f5f5f5; text-decoration:none; }
  .avatar-dropdown a + a{ border-top:1px solid var(--border); }

  /* ---------- 通知下拉選單 ---------- */
  .notif-wrap{ position:relative; }
  .notif-dropdown{
    display:none; position:absolute; top:calc(100% + 10px); right:0; width:320px; max-height:400px; overflow-y:auto;
    background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); z-index:200;
  }
  .notif-dropdown.show{ display:block; }
  .notif-dropdown-head{ padding:14px 16px; font-size:13px; font-weight:800; border-bottom:1px solid var(--border); }
  .notif-item{ display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:default; }
  .notif-item:last-child{ border-bottom:none; }
  .notif-item.unread{ background:#fbfaf5; }
  .notif-item.notif-clickable{ cursor:pointer; position:relative; }
  .notif-item.notif-clickable:hover{ background:#fafaf8; }
  .notif-item.notif-clickable::after{
    content:"›"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
    font-size:16px; color:var(--text-placeholder); font-weight:700;
  }
  .notif-item-icon{ font-size:16px; flex-shrink:0; }
  .notif-item-title{ font-size:12.5px; font-weight:700; }
  .notif-item-time{ font-size:11px; color:var(--text-placeholder); margin-top:2px; }
  .notif-empty{ padding:30px 16px; text-align:center; font-size:12.5px; color:var(--text-sub); }

  /* ---------- 新增服務後的浮動提醒 toast（右下角，不擋住畫面操作）---------- */
  .staff-reminder-toast{
    display:none; position:fixed; right:24px; bottom:24px; z-index:500; width:330px;
    background:#fff; border:1px solid var(--border-strong); border-radius:14px; box-shadow: var(--shadow-lg);
    padding:18px; gap:12px; align-items:flex-start;
  }
  .staff-reminder-toast.show{ display:flex; animation: staffReminderIn .25s ease; }
  @keyframes staffReminderIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
  .staff-reminder-icon{ font-size:22px; flex-shrink:0; }
  .staff-reminder-body{ flex:1; min-width:0; }
  .staff-reminder-title{ font-size:13.5px; font-weight:800; margin-bottom:6px; }
  .staff-reminder-desc{ font-size:12px; color:var(--text-sub); line-height:1.7; margin-bottom:12px; }
  .staff-reminder-btn{
    padding:8px 16px; border-radius:999px; border:none; background:var(--primary); color:#fff;
    font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer;
  }
  .staff-reminder-btn:hover{ background:var(--primary-dark); }
  .staff-reminder-close{ background:none; border:none; cursor:pointer; color:var(--text-placeholder); font-size:18px; flex-shrink:0; padding:0; line-height:1; }
  /* 未讀通知的脈動特效：小紅點外圈持續擴散淡出，第一眼就能注意到有新消息 */
  .notif-pulse{ animation: notifPulse 1.8s ease-out infinite; }
  .notif-pulse::after{
    content:""; position:absolute; inset:0; border-radius:999px; background:inherit;
    animation: notifPulseRing 1.8s ease-out infinite;
  }
  @keyframes notifPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
  @keyframes notifPulseRing{
    0%{ box-shadow: 0 0 0 0 rgba(224,149,44,.55); }
    100%{ box-shadow: 0 0 0 8px rgba(224,149,44,0); }
  }

  /* ---------- Footer ---------- */
  footer.site-footer{
    background:#f5f5f5; border-top:1px solid var(--border); padding: 48px 24px 32px; margin-top: 20px;
  }
  .footer-inner{
    max-width:1400px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; gap: 24px;
  }
  .footer-brand h3{ font-size:21px; font-weight:800; margin:0 0 10px; }
  .footer-brand p{ font-size:13.5px; color:var(--text-sub); line-height:1.7; margin:0 0 16px; }
  .footer-socials{ display:flex; gap:10px; }
  .footer-socials a{
    width:32px;height:32px;border-radius:50%; border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center; color:var(--text-main);
  }
  .footer-col h4{ font-size:15px; font-weight:800; margin:0 0 14px; }
  .footer-col a{ display:block; font-size:13.5px; color:var(--text-sub); margin-bottom:10px; }
  .footer-col a:hover{ color:var(--text-main); }
  .footer-bottom{
    max-width:1400px; margin: 28px auto 0; padding-top:20px; border-top:1px solid var(--border);
    font-size:12.5px; color:var(--text-sub); text-align:center;
  }

  /* ---------- 賣家品牌淡化模式 ----------
     進到某個賣家的頁面（商品內容頁／服務內容頁／賣家首頁，未來結帳流程也是）時，
     #app-storefront 會被加上 .seller-mode class（見 switchPage()），
     這裡把 Muajee 的 Logo、收藏、完整頁尾都隱藏，只留下搜尋列／購物車／會員頭像，
     讓使用者的視覺焦點停留在「這個賣家自己的頁面」，弱化平台本身的存在感；
     首頁／全部商品列表頁則維持完整品牌（因為那才是 Muajee 平台本身的頁面）。
     Logo 原本的位置改放「這個賣家自己的頭貼」（.seller-header-avatar），
     點下去一樣回到這家店的首頁，讓整體風格更像是這個賣家自己的網站。
  ---------------------------------------------- */
  .seller-mode .logo{ display:none; }
  .seller-mode .icon-wishlist{ display:none; }
  .seller-mode footer.site-footer .footer-inner{ display:none; }
  .seller-mode footer.site-footer{ padding-top:20px; margin-top:20px; }
  .seller-mode .footer-bottom{ margin-top:0; padding-top:0; border-top:none; }

  .seller-header-avatar{
    display:none;
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    background: var(--primary); color:#fff; border:none; cursor:pointer;
    font-size:15px; font-weight:800; align-items:center; justify-content:center;
  }
  .seller-mode .seller-header-avatar{ display:flex; }
  /* 賣家中心後台永遠是這家店自己的空間，頭貼不需要看 seller-mode，永遠顯示 */
  .seller-header-avatar.backend-avatar{ display:flex; }

  /* ---------- 搜尋範圍切換：店內搜尋（預設）／全站搜尋，只在賣家頁面出現 ----------
     平常（平台首頁／全部商品）只顯示一個放大鏡＝全站搜尋，沒有模糊地帶；
     在賣家頁面，預設是「店內搜尋」（只搜這個賣家的商品），使用者可以點另一個
     圖示「升級」成全站搜尋（搜尋 Muajee 全站商品）。全程不用文字標籤，
     用圖示大小／顏色／位移來表達「範圍變大了」的感覺。
  ---------------------------------------------- */
  .search-scope-toggle{ display:none; }
  .seller-mode .search-scope-toggle{
    display:flex; align-items:center; gap:2px;
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:#eef1f4; border-radius:999px; padding:3px;
  }
  .seller-mode .search-default-icon{ display:none; }
  .scope-icon-btn{
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; border:none; background:transparent;
    color:var(--text-placeholder); cursor:pointer; transition: all .18s ease;
  }
  .scope-icon-btn.active{
    background: var(--primary); color:#fff;
    box-shadow: 0 2px 8px rgba(30,38,32,.35);
  }
  .scope-icon-btn.scope-global.active{
    transform: scale(1.12);
  }
  .scope-icon-btn:hover{ color: var(--primary); }
  .scope-icon-btn.active:hover{ color:#fff; }

  /* ---------- Page shell ---------- */
  .sf-page-wrap{ max-width: 1400px; margin: 0 auto; padding: 0 24px 60px; }
  .page{ display:none; }
  .page.active{ display:block; }

  /* ---------- Home: hero ---------- */
  .hero{
    margin-top: 24px;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
    color:#fff;
    padding: 56px 48px;
    display:flex; align-items:center; justify-content:space-between; gap:40px;
    overflow:hidden;
    position:relative;
    box-shadow: var(--shadow-lg);
  }
  .hero.hero-banner{
    padding:0;
    background:transparent;
    box-shadow:none;
    display:block;
    overflow:hidden;
  }
  .hero.hero-banner::after{ display:none; }
  .hero-banner-link{ display:block; width:100%; line-height:0; }
  .hero.hero-banner img,
  .hero-banner-link img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    object-position:center;
    vertical-align:top;
  }
  .hero::after{
    content:"";
    position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  }
  .hero-text{ max-width: 520px; position:relative; z-index:1; }
  .hero-eyebrow{ font-size:13.5px; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.65); margin-bottom:10px; }
  .hero-text h1{ font-size:33px; font-weight:800; margin:0 0 14px; line-height:1.4; }
  .hero-text p{ font-size:15px; color:#e2ded3; margin:0 0 24px; line-height:1.8; }
  .hero-cta{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; color:var(--primary); border:none; padding:13px 26px; border-radius:999px;
    font-size:15px; font-weight:800; cursor:pointer;
  }
  .hero-visual{
    width:220px; height:220px; border-radius:50%; flex-shrink:0;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-size:64px; position:relative; z-index:1;
  }

  /* ---------- Home: category chips ---------- */
  .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin: 44px 0 18px; }

  /* ---------- Product list page ---------- */
  .list-head{
    display:flex; align-items:center; justify-content:space-between;
    margin: 28px 0 22px;
  }
  .list-head h1{ font-size:25px; font-weight:800; margin:0; }
  .list-head select{
    padding: 9px 14px; border:1px solid var(--border); border-radius:6px;
    font-size:14.5px; font-family:inherit; background:#fff; color:var(--text-main); cursor:pointer;
  }
  .section-head h2{ font-size:21px; font-weight:800; margin:0; }
  .section-head .see-all{ font-size:13.5px; font-weight:700; color:var(--text-sub); cursor:pointer; }

  /* ---------- Product grid (storefront cards) ---------- */
  .sf-grid{
    display:grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }
  .catalog-empty-note{
    grid-column: 1 / -1; text-align:center; padding:60px 20px; color:var(--text-sub); font-size:13.5px; line-height:1.9;
    background:#fff; border:1px dashed var(--border-strong); border-radius:14px;
  }
  .catalog-empty-note a{ font-weight:700; }
  .sf-card{
    background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer;
    display:flex; flex-direction:column; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    box-shadow: var(--shadow-xs);
  }
  .sf-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-strong); }
  .sf-card-img{
    aspect-ratio: 1/1; position:relative; overflow:hidden;
    background:#fff; border-bottom:1px solid var(--border);
  }
  .sf-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .sf-tag{
    position:absolute; top:10px; left:10px; padding:3px 10px; border-radius:999px;
    background:#fff; font-size:11.5px; font-weight:800; color:var(--primary); box-shadow:0 2px 6px rgba(0,0,0,.12);
  }
  .sf-wishlist-btn{
    position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; border:none;
    background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--text-sub); box-shadow:0 2px 6px rgba(0,0,0,.12); z-index:2; transition: all .15s ease;
  }
  .sf-wishlist-btn:hover{ color:#c0392b; transform: scale(1.08); }
  .sf-wishlist-btn.active{ color:#c0392b; }
  .sf-wishlist-btn.active svg{ fill:#c0392b; }
  .sf-card-body{ padding: 13px 14px 15px; }
  .sf-card-cat{ font-size:12px; color:var(--text-sub); margin-bottom:4px; }
  .sf-card-name{
    font-size:15px; font-weight:700; margin-bottom:8px;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  }
  .sf-card-price{ font-size:17px; font-weight:800; }

  /* ---------- Product detail ---------- */
  .breadcrumb{ font-size:13.5px; color:var(--text-sub); margin: 22px 0 20px; }
  .breadcrumb a{ color:var(--text-sub); }
  .breadcrumb a:hover{ color:var(--primary); }
  .breadcrumb .sep{ margin:0 6px; }

  .pd-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items:flex-start; margin-top: 28px; }
  .pd-gallery-main{
    aspect-ratio:1/1; border-radius:10px; overflow:hidden; position:relative;
    background:#fff; border:1px solid var(--border);
  }
  .pd-gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pd-thumbs{ display:flex; gap:10px; margin-top:12px; }
  .pd-thumb{
    width:76px; height:76px; border-radius:8px; overflow:hidden; cursor:pointer;
    border:2px solid var(--border); background:#fff; flex-shrink:0;
  }
  .pd-thumb.active{ border-color: var(--primary); }
  .pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* 商品性質標籤（新品／預約服務）疊加在主圖右下角，跟圖片底部對齊，
     騰出右欄空間讓標題可以直接從最上面開始，版面更緊湊不浪費空間 */
  .pd-badge{
    position:absolute; right:14px; bottom:14px; z-index:2;
    display:inline-block; background:var(--success-bg); color:var(--success-text); font-size:11.5px; font-weight:800;
    padding:4px 11px; border-radius:999px; letter-spacing:.02em;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }
  .pd-title{
    font-size:23px; font-weight:800; margin:0 0 8px; line-height:1.35;
    min-height: 2.7em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .pd-rating{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-sub); margin-bottom:18px; min-height:16px; }
  .pd-rating .stars{ color:var(--text-main); letter-spacing:1px; font-size:13.5px; }

  .pd-price-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; min-height:44px; }
  .pd-price{ font-size:35px; font-weight:800; color: var(--primary); letter-spacing:-.01em; }
  .pd-price sup{ font-size:17px; font-weight:700; margin-right:1px; top:-0.9em; }
  .pd-ship-pill{
    display:inline-flex; align-items:center; gap:5px;
    background: var(--success-bg); color: var(--success-text);
    font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;
  }

  .pd-summary{
    font-size:16px; color:var(--text-main); line-height:1.8; font-weight:500;
    margin: 0 0 22px; padding: 18px 20px;
    background:#f7f9fb; border-left:3px solid var(--primary); border-radius: 0 8px 8px 0;
    min-height: 92px; display:flex; align-items:center;
  }

  .pd-purchase-row{ display:flex; align-items:stretch; gap:10px; margin-bottom:24px; min-height:44px; }
  .qty-stepper{
    display:flex; align-items:center; border:1px solid var(--border); border-radius:999px;
    overflow:hidden; flex-shrink:0; height:44px;
  }
  .qty-stepper button{
    width:40px; height:100%; border:none; background:#fff; font-size:17px; cursor:pointer; color:var(--text-main);
  }
  .qty-stepper button:hover{ background:#f0f0f0; }
  .qty-stepper .qty-val{ width:36px; text-align:center; font-size:15px; font-weight:700; }

  .pd-actions{ display:flex; gap:10px; flex:1; }
  .pd-actions button{
    flex:1; height:44px; border-radius:999px; font-size:15px; font-weight:700; cursor:pointer;
    transition: box-shadow .2s ease, transform .15s ease, background .2s ease;
  }
  .pd-btn-cart{ background:#fff; color:var(--text-main); border:1.5px solid var(--border-strong); }
  .pd-btn-cart:hover{ border-color:var(--primary); color:var(--primary); }
  .pd-btn-buy{ background:var(--primary); color:#fff; border:none; box-shadow: var(--shadow-sm); }
  .pd-btn-buy:hover{ background:var(--primary-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); }

  .pd-info-table{ border:1px solid var(--border); border-radius:10px; overflow:hidden; }
  .pd-info-row{
    display:flex; justify-content:space-between; padding:13px 20px; font-size:14.5px;
  }
  .pd-info-row + .pd-info-row{ border-top:1px solid var(--border); }
  .pd-info-row .k{ color:var(--text-sub); }
  .pd-info-row .v{ font-weight:700; }

  .pd-tabs-wrap{ margin-top: 40px; }
  .pd-tabs{ display:flex; border-bottom:1px solid var(--border); background:#fff; border-radius:10px 10px 0 0; overflow:hidden; }
  .pd-tab{
    flex:1; text-align:center; padding:16px; font-size:15px; font-weight:700; color:var(--text-sub);
    cursor:pointer; border:none; background:none; border-bottom:2px solid transparent;
  }
  .pd-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }
  .pd-tab-link{ color:var(--link); }
  .pd-tab-link:hover{ color:var(--primary); text-decoration:none; }
  .pd-tab-panel{ background:#fff; border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; padding:28px 30px; display:none; }
  .pd-tab-panel.active{ display:block; }
  .pd-tab-panel h3{ font-size:16px; font-weight:800; margin:0 0 12px; }
  .pd-tab-panel p{ font-size:14.5px; color:var(--text-main); line-height:1.8; margin:0 0 16px; }
  .pd-tab-panel ul{ margin:0; padding-left:20px; }
  .pd-tab-panel li{ font-size:14.5px; line-height:2; }
  .pd-empty-note{ font-size:14.5px; color:var(--text-sub); text-align:center; padding:30px 0; }

  /* ---------- 賣家首頁 ---------- */
  .seller-banner{
    display:flex; align-items:center; gap:22px;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:28px 30px; margin: 28px 0 28px;
    box-shadow: var(--shadow-sm);
  }
  .seller-avatar{
    width:76px; height:76px; border-radius:50%; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:29px; font-weight:800; flex-shrink:0;
  }
  .seller-info h1{ font-size:21px; font-weight:800; margin:0 0 6px; }
  .seller-info p{ font-size:13.5px; color:var(--text-sub); line-height:1.7; margin:0 0 14px; max-width:560px; }
  .seller-stats{ display:flex; gap:28px; }
  .seller-stat{ display:flex; flex-direction:column; }
  .seller-stat strong{ font-size:18.5px; font-weight:800; }
  .seller-stat span{ font-size:12.5px; color:var(--text-sub); }
  .seller-tagline{ font-size:14.5px; color:var(--text-sub); font-style:italic; margin:-4px 0 8px; }
  /* 社群連結圖示按鈕列：只有賣家填了才顯示，乾淨的圓形描邊小圖示，排成一行 */
  .seller-social-row{ display:flex; gap:10px; margin-top:14px; }
  .seller-social-btn{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--border-strong); background:#fff;
    display:flex; align-items:center; justify-content:center; color:var(--text-main); flex-shrink:0;
    transition: all .15s ease;
  }
  .seller-social-btn:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); }

  .seller-service-intro{ font-size:13.5px; color:var(--text-sub); margin: 0 0 20px; }
  .home-svc-intro{ font-size:13.5px; color:var(--text-sub); margin: -6px 0 18px; }

  /* ---------- 結帳頁（商品購買／服務預約共用）---------- */
  .checkout-title{ font-size:23px; font-weight:800; margin: 28px 0 22px; }
  .checkout-layout{ display:grid; grid-template-columns: 1.6fr 1fr; gap:40px; align-items:start; padding-bottom:60px; }
  .checkout-main{ min-width:0; } /* grid 子項防止內容把欄寬撐開 */

  .checkout-identity-toggle{ display:flex; gap:12px; margin-bottom:22px; }
  .ci-tab{
    flex:1; text-align:left; padding:14px 18px; border-radius:10px; border:1.5px solid var(--border);
    background:#fff; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:3px;
  }
  .ci-tab-title{ font-size:15px; font-weight:800; color:var(--text-main); }
  .ci-tab-sub{ font-size:12.5px; color:var(--text-sub); }
  .ci-tab.active{ border-color:var(--primary); background:var(--bg-page); }
  .ci-tab.active .ci-tab-title{ color:var(--primary); }

  .checkout-form-card{
    background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px 26px; margin-bottom:22px; box-shadow: var(--shadow-sm);
  }
  .checkout-form-card h3{ font-size:16px; font-weight:800; margin:0 0 18px; }

  .checkout-submit-btn{ width:100%; height:48px; border-radius:999px; font-size:15.5px; }
  .checkout-submit-btn:disabled{ opacity:.45; cursor:not-allowed; }
  .checkout-legal-note{ font-size:12.5px; color:var(--text-sub); text-align:center; margin-top:12px; }

  .checkout-summary{
    background:#fafbfc; border:1px solid var(--border); border-radius:14px; padding:24px 26px; box-shadow: var(--shadow-xs);
  }
  .checkout-summary h3{ font-size:15px; font-weight:800; margin:0 0 16px; }
  .co-sum-row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:10px; color:var(--text-sub); }
  .co-sum-row strong{ color:var(--text-main); font-weight:700; }
  .co-sum-total{ display:flex; justify-content:space-between; font-size:17px; font-weight:800; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
  .cs-item-row{ display:flex; gap:14px; margin-bottom:16px; }
  .cs-item-thumb{ width:64px; height:64px; border-radius:8px; overflow:hidden; flex-shrink:0; background:#e8ecef; }
  .cs-item-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .cs-item-name{ font-size:15px; font-weight:700; margin-bottom:4px; }
  .cs-item-meta{ font-size:13px; color:var(--text-sub); line-height:1.7; }
  .cs-divider{ border:none; border-top:1px solid var(--border); margin:16px 0; }
  .cs-row{ display:flex; justify-content:space-between; font-size:14.5px; margin-bottom:8px; color:var(--text-sub); }
  .cs-row strong{ color:var(--text-main); }
  .cs-total-row{ display:flex; justify-content:space-between; font-size:17px; font-weight:800; margin-top:14px; }
  .cs-total-row span:last-child{ color:var(--primary); }

  .checkout-success-card{
    max-width:480px; margin: 60px auto; text-align:center;
    background:#fff; border:1px solid var(--border); border-radius:14px; padding:44px 36px;
  }
  .checkout-success-icon{
    width:56px; height:56px; border-radius:50%; background:var(--success-bg); color:var(--success-text);
    font-size:27px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  }
  .checkout-success-card h1{ font-size:20px; font-weight:800; margin:0 0 8px; }
  .checkout-success-card p{ font-size:14.5px; color:var(--text-sub); margin:0 0 20px; }
  .checkout-success-detail{
    background:#fafbfc; border:1px solid var(--border); border-radius:8px; padding:16px 18px;
    text-align:left; font-size:13.5px; line-height:2; margin-bottom:24px;
  }
  .checkout-success-actions{ display:flex; gap:10px; }
  .checkout-success-actions .btn{ flex:1; }
  .lookup-hint{ font-size:12.5px; color:var(--text-sub); margin-top:16px; }
  .lookup-hint a{ font-weight:700; }

  /* ---------- 查詢訂單頁 ---------- */
  .lookup-wrap{ max-width:520px; margin:40px auto 60px; }
  .lookup-wrap h1{ font-size:24px; font-weight:800; margin:0 0 8px; text-align:center; }
  .lookup-sub{ font-size:13px; color:var(--text-sub); text-align:center; margin:0 0 28px; line-height:1.7; }
  .lookup-form{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:28px; box-shadow: var(--shadow-sm); }
  .lookup-form .form-field{ margin-bottom:16px; }
  .lookup-error{ color:#c23b2e; font-size:12.5px; margin-top:10px; text-align:center; }

  .lookup-result{ margin-top:20px; }
  .lookup-order-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px; box-shadow: var(--shadow-sm); }
  .lookup-order-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
  .lookup-order-id{ font-size:16px; font-weight:800; }
  .lookup-order-sub{ font-size:12.5px; color:var(--text-sub); margin-top:3px; }

  .lookup-progress{ display:flex; align-items:center; margin:20px 0; }
  .lookup-step{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color:var(--text-placeholder); flex-shrink:0; width:64px; text-align:center; }
  .lookup-step-dot{ width:12px; height:12px; border-radius:50%; background:var(--border); border:2px solid var(--border); }
  .lookup-step.done{ color:var(--text-main); font-weight:700; }
  .lookup-step.done .lookup-step-dot{ background:#2f8f5b; border-color:#2f8f5b; }
  .lookup-step-line{ flex:1; height:2px; background:var(--border); margin-bottom:18px; }
  .lookup-cancelled-note{ background:var(--danger-bg); color:var(--danger-text); text-align:center; padding:10px; border-radius:8px; font-size:12.5px; font-weight:700; margin:16px 0; }
  .lookup-tracking{ background:#f5faf7; border:1px dashed #bfe0cd; border-radius:8px; padding:12px 14px; font-size:12.5px; margin-bottom:16px; }

  .lookup-order-rows{ border-top:1px solid var(--border); padding-top:14px; }
  .lookup-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:13px; }
  .lookup-row .k{ color:var(--text-sub); }
  .lookup-row .v{ font-weight:700; }
  .lookup-actions{ display:flex; gap:10px; margin-top:18px; }

  /* ---------- 收貨方式切換（宅配／超商取貨）---------- */
  .delivery-method-toggle{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
  .dm-tab{
    flex:1; min-width:104px; padding:11px 14px; border-radius:999px; border:1.5px solid var(--border); background:#fff;
    font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; color:var(--text-sub); transition: all .15s ease; white-space:nowrap;
  }
  .dm-tab:hover{ border-color:var(--border-strong); color:var(--text-main); }
  .dm-tab.active{ border-color:var(--primary); background:var(--primary); color:#fff; box-shadow: var(--shadow-sm); }

  /* 收貨方式底下對應的內容區塊（地址欄位 或 已選門市），統一跟上面的切換按鈕保持間距，
     不會像修正前那樣「超商取貨」選項底下的內容緊貼著按鈕、看起來黏在一起。 */
  .delivery-method-panel{ margin-top:14px; }

  .cvs-picked-box{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    background:var(--bg-page); border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:13px; line-height:1.7;
  }

  /* ---------- 超商門市選擇器 Modal ---------- */
  .cvs-store-list{ max-height:280px; overflow-y:auto; margin-top:14px; border:1px solid var(--border); border-radius:8px; }
  .cvs-store-item{ display:flex; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer; align-items:center; }
  .cvs-store-item:last-child{ border-bottom:none; }
  .cvs-store-item:hover{ background:var(--bg-page); }
  .cvs-store-icon{ font-size:18px; flex-shrink:0; }
  .cvs-store-name{ font-size:13px; font-weight:700; }
  .cvs-store-address{ font-size:11.5px; color:var(--text-sub); margin-top:2px; }

  /* ---------- 評價星級選擇器 ---------- */
  .review-star-picker{ display:flex; gap:8px; justify-content:center; font-size:32px; }
  .review-star{ color:var(--border-strong); cursor:pointer; transition: color .15s ease, transform .1s ease; }
  .review-star:hover{ transform: scale(1.1); }
  .review-star.active{ color:#f0b429; }

  /* ---------- 商品／服務頁「評價」分頁的真實評價列表 ---------- */
  .review-summary{ display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--border); }
  .review-summary-score{ font-size:32px; font-weight:800; }
  .review-summary-stars{ color:#f0b429; font-size:15px; letter-spacing:1px; }
  .review-summary-count{ font-size:12px; color:var(--text-sub); }
  .review-item{ padding:14px 0; border-bottom:1px solid var(--border); }
  .review-item:last-child{ border-bottom:none; }
  .review-item-stars{ color:#f0b429; font-size:13px; letter-spacing:1px; }
  .review-item-meta{ font-size:11.5px; color:var(--text-sub); margin-left:8px; }
  .review-item-comment{ font-size:13px; margin-top:6px; line-height:1.7; }

  /* ---------- 購物車 ---------- */
  .cart-empty-state{ text-align:center; padding:70px 20px; color:var(--text-sub); }
  .cart-empty-icon{ font-size:44px; margin-bottom:14px; }
  .cart-empty-state p{ font-size:13.5px; margin:0 0 20px; }

  .cart-seller-group{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px 22px; margin-bottom:18px; box-shadow: var(--shadow-xs); }
  .cart-seller-head{ font-size:13.5px; font-weight:800; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
  .cart-item-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
  .cart-item-row:last-child{ border-bottom:none; }
  .cart-item-checkbox{ width:18px; height:18px; flex-shrink:0; cursor:pointer; accent-color: var(--primary); }
  .cart-item-thumb{ width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--border); flex-shrink:0; background:#fff; }
  .cart-item-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .cart-item-info{ flex:1; min-width:0; }
  .cart-item-name{ font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cart-item-price{ font-size:12.5px; color:var(--text-sub); margin-top:3px; }
  .cart-item-qty-stepper{ display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:999px; padding:4px 10px; flex-shrink:0; }
  .cart-item-qty-stepper button{ width:20px; height:20px; border:none; background:none; cursor:pointer; font-size:14px; font-weight:700; color: var(--text-main); }
  .cart-item-qty-val{ font-size:13px; font-weight:700; min-width:18px; text-align:center; }
  .cart-item-remove{ background:none; border:none; cursor:pointer; color:var(--text-placeholder); font-size:18px; flex-shrink:0; padding:4px; }
  .cart-item-remove:hover{ color:#c23b2e; }
  .cart-item-subtotal{ font-size:13.5px; font-weight:800; width:70px; text-align:right; flex-shrink:0; }

  /* ---------- 我的帳戶 ---------- */
  .account-wrap{ max-width:720px; margin:20px auto 60px; }
  .account-tabs{ display:flex; gap:10px; margin-bottom:22px; border-bottom:1px solid var(--border); }
  .account-tab{
    padding:11px 18px; border:none; background:none; cursor:pointer; font-family:inherit;
    font-size:13.5px; font-weight:700; color:var(--text-sub); border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .account-tab.active{ color:var(--text-main); border-bottom-color: var(--primary); }
  .account-panel{ display:none; }
  .account-panel.active{ display:block; }
  .account-order-card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin-bottom:14px; }
  .account-order-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
  .account-order-id{ font-weight:800; font-size:13.5px; }
  .account-order-meta{ font-size:12.5px; color:var(--text-sub); }


  /* ---------- 登入／註冊頁（會員結帳但未登入時導向）---------- */
  .auth-card{
    max-width:420px; margin:60px auto; background:#fff; border:1px solid var(--border); border-radius:14px; padding:40px 36px;
  }
  .auth-card h1{ font-size:21px; font-weight:800; margin:0 0 6px; text-align:center; }
  .auth-sub{ font-size:13.5px; color:var(--text-sub); text-align:center; margin:0 0 26px; }
  .auth-card .form-field{ margin-bottom:16px; }
  .auth-card .checkout-submit-btn{ margin-top:6px; }
  .auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; font-size:12.5px; color:var(--text-sub); }
  .auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--border); }
  .auth-back{ text-align:center; margin-top:18px; font-size:13.5px; }
  .auth-back a{ color:var(--primary); text-decoration:none; }

  /* ---------- 註冊頁面（獨立完整頁面，仿照參考設計：頂部橫幅＋雙欄步驟表單＋右側說明卡）---------- */
  .register-hero{
    background:#fff; border:1px solid var(--border); border-radius:14px; padding:32px 36px; margin:24px 0; box-shadow: var(--shadow-sm);
  }
  .register-hero h1{ font-size:28px; font-weight:800; margin:0 0 8px; }
  .register-hero p{ font-size:14px; color:var(--text-sub); margin:0; }
  .register-breadcrumb{ margin-top:14px !important; font-size:12.5px !important; }
  .register-breadcrumb a{ color:var(--text-sub); text-decoration:none; }

  .register-layout{ display:grid; grid-template-columns: 1.7fr 1fr; gap:24px; align-items:start; margin-bottom:60px; }
  .register-main{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:28px 30px; box-shadow: var(--shadow-sm); }
  .register-side{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:28px 30px; box-shadow: var(--shadow-sm); }
  .register-side h3{ font-size:15px; font-weight:800; margin:0 0 16px; }
  .register-side ul{ margin:0; padding-left:20px; font-size:13px; color:var(--text-sub); line-height:2.3; }

  .register-steps{ display:flex; gap:10px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--border); }
  .register-step-btn{
    display:flex; align-items:center; gap:9px; padding:9px 18px; border-radius:999px; border:1.5px solid var(--border);
    background:#fff; font-family:inherit; font-size:13px; font-weight:700; color:var(--text-sub); cursor:pointer; transition: all .15s ease;
  }
  .register-step-num{
    width:20px; height:20px; border-radius:50%; background:var(--border); color:var(--text-sub);
    display:flex; align-items:center; justify-content:center; font-size:11.5px; flex-shrink:0;
  }
  .register-step-btn.active{ border-color:var(--primary); color:var(--text-main); }
  .register-step-btn.active .register-step-num{ background:var(--primary); color:#fff; }

  .register-step-panel{ display:none; }
  .register-step-panel.active{ display:block; }
  .register-pw-strength{ height:4px; border-radius:999px; background:var(--border); margin-top:8px; overflow:hidden; }
  .register-pw-strength span{ display:block; height:100%; width:0%; background:var(--primary); transition: width .2s ease, background .2s ease; }
  .register-terms{ font-size:12px; color:var(--text-sub); margin:18px 0 16px; }
  .register-switch-btn{ width:100%; height:46px; margin-top:12px; }

  /* ---------- 註冊 STEP2：使用者條款內文框 ---------- */
  .register-terms-box{
    max-height:280px; overflow-y:auto; border:1px solid var(--border); border-radius:10px;
    padding:16px 18px; background:var(--bg-page); font-size:12.5px; line-height:1.8; color:var(--text-sub);
  }
  .register-terms-box p{ margin:0 0 14px; }
  .register-terms-box p:last-child{ margin-bottom:0; }
  .register-terms-box strong{ color:var(--text-main); }

  /* ---------- 註冊 STEP3：示範驗證碼提示框與錯誤訊息 ---------- */
  .register-demo-code-box{
    background:#fdf6e8; border:1px dashed #e0c27a; border-radius:8px; padding:12px 14px;
    font-size:12.5px; color:var(--text-sub); line-height:1.8;
  }
  .register-demo-code-box strong{ color:var(--text-main); font-size:15px; letter-spacing:2px; }
  .register-verify-error{ color:#c0392b; font-size:12px; margin:8px 0 0; }

  /* ---------- 付款頁：銀行轉帳資訊卡／綠界導頁卡 ---------- */
  .pay-method-card{
    background:#fff; border:1px solid var(--border); border-radius:14px; padding:26px 28px; margin-bottom:20px; box-shadow: var(--shadow-sm);
  }
  .pay-method-card h3{ font-size:16px; font-weight:800; margin:0 0 16px; display:flex; align-items:center; gap:8px; }
  .pay-bank-row{ display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--border); font-size:15px; }
  .pay-bank-row:last-of-type{ border-bottom:none; }
  .pay-bank-row .k{ color:var(--text-sub); }
  .pay-bank-row .v{ font-weight:800; font-size:17px; letter-spacing:.02em; }
  .pay-instructions{
    background:#fafbfc; border:1px dashed var(--border); border-radius:8px; padding:14px 16px; margin:18px 0; font-size:13.5px; color:var(--text-sub); line-height:1.9;
  }
  .pay-instructions strong{ color:var(--text-main); }
  .pay-confirm-note{
    background:var(--bg-page); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:18px; font-size:13.5px; color:var(--text-main); line-height:1.8;
  }
  .pay-ecpay-box{ text-align:center; padding:30px 10px; }
  .pay-ecpay-box .pay-ecpay-icon{ font-size:38px; margin-bottom:14px; }
  .pay-ecpay-box p{ font-size:14.5px; color:var(--text-sub); margin:0 0 24px; }
  .pay-ecpay-fail-link{ font-size:12px; margin:14px 0 0; }
  .pay-ecpay-fail-link a{ color:var(--text-sub); text-decoration:underline; }
  .pay-fail-icon{ color:#c23b2e; background:#fdeceb; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:26px; }
  .pay-fail-actions{ max-width:320px; margin:0 auto; }

  /* ---------- 預約須知 Modal ---------- */
  .booking-notice-text{
    background:#fafbfc; border:1px solid var(--border); border-radius:8px; padding:16px 18px;
    font-size:14.5px; color:var(--text-main); line-height:1.9; max-height:260px; overflow-y:auto; white-space:pre-wrap;
  }

  /* ---------- 服務內容頁：一目了然的可預約日期區塊 ---------- */
  .svc-type-badge{ background: var(--success-bg); color: var(--success-text); }
  .svc-avail-section{
    margin: 34px 0 40px; background:#fafbfc; border:1px solid var(--border); border-radius:12px; padding:24px 26px;
  }
  .svc-avail-section .section-head{ margin:0 0 16px; }
  .svc-avail-section .section-head h2{ font-size:17px; }

  .svc-booking-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:36px; align-items:start; }

  /* 左欄：中等尺寸月曆，比例跟右邊選項區塊平衡 */
  .svc-cal-col{ min-width:0; }
  .cal-toolbar-sm{ margin-bottom:14px; }
  .cal-toolbar-sm .cal-month-label{ font-size:17px; min-width:auto; font-weight:800; }
  .cal-toolbar-sm .cal-nav-btn{ width:30px; height:30px; font-size:16px; }
  .cal-toolbar-sm .cal-nav{ gap:14px; }
  .cal-legend-sm{ font-size:14.5px; font-weight:600; gap:16px; margin-bottom:12px; }
  .cal-legend-sm .dot{ width:9px; height:9px; }
  .cal-weekdays-sm{ font-size:13.5px; font-weight:700; padding-bottom:7px; }
  .cal-grid-sm{ gap:6px; margin-top:7px; }
  .cal-grid-sm .cal-day{
    padding:7px 4px; border-radius:6px; min-height:62px; aspect-ratio:auto;
    display:flex; flex-direction:column; justify-content:flex-start; overflow:visible;
  }
  .cal-grid-sm .cal-day .d-num{ font-size:15px; font-weight:700; flex-shrink:0; }
  .cal-grid-sm .cal-day .d-status{
    font-size:12px; font-weight:800; padding:2.5px 6px; border-radius:999px;
    align-self:flex-start; margin-top:6px; flex-shrink:0; line-height:1.4; white-space:nowrap;
    overflow:visible; text-overflow:clip; max-width:none;
  }
  .cal-grid-sm .cal-day.st-open .d-status{ background: var(--cal-active-bg); color: var(--cal-active-text); }
  .cal-grid-sm .cal-day.st-off .d-status{ background:var(--cal-empty-bg); color:var(--cal-empty-text); }

  /* 右欄：時段／員工／聯絡資訊 */
  .svc-detail-col{ min-width:0; }
  .svc-field-block{ margin-bottom:22px; }
  .svc-field-label{ display:block; font-size:15px; font-weight:800; margin-bottom:11px; }
  .svc-field-placeholder{ font-size:14.5px; color:var(--text-placeholder); }
  .svc-slot-row{ display:flex; flex-wrap:wrap; gap:10px; }
  .svc-pill-btn{
    padding:11px 20px; border-radius:999px; border:1.5px solid var(--border); background:#fff;
    font-size:15px; font-weight:700; color:var(--text-main); cursor:pointer; font-family:inherit;
    transition: border-color .15s, background .15s, color .15s;
  }
  .svc-pill-btn:hover{ border-color:var(--primary); color:var(--primary); }
  .svc-pill-btn.selected{ background:var(--primary); border-color:var(--primary); color:#fff; }
  .svc-pill-btn.selected:hover{ color:#fff; }
  .svc-pill-btn:disabled{ opacity:.35; cursor:not-allowed; border-color:var(--border); color:var(--text-sub); }

  .svc-next-hint{ font-size:13.5px; color:var(--text-sub); margin: 4px 0 16px; line-height:1.7; }
  .svc-confirm-btn{ width:100%; height:46px; border-radius:999px; }
  .svc-confirm-btn:disabled{ opacity:.4; cursor:not-allowed; }

  /* ---------- Mobile ---------- */
  @media (max-width: 860px){
    .header-inner{ padding: 10px 12px; gap:8px; flex-wrap:wrap; max-width:100%; min-width:0; }
    .logo{ font-size:0; gap:0; }
    .logo .logo-mark{ width:30px;height:30px; font-size:17px; }
    .header-search{ order:3; flex-basis:100%; max-width:none; min-width:0; }
    .header-search input{ padding:8px 36px 8px 12px; }
    .header-actions{ gap:8px; max-width:calc(100% - 42px); min-width:0; flex-wrap:nowrap; }
    .header-auth-btns{ gap:6px; }
    .header-auth-btn{ padding:6px 10px; font-size:12px; }
    .icon-wishlist{ display:none; }
    .header-user-dropdown{ right:0; left:auto; min-width:160px; max-width:calc(100vw - 24px); }

    .sf-page-wrap{ padding: 0 14px 40px; }
    /* 手機版橫幅維持「長方形橫向排列」不要變成直向堆疊（那樣會讓橫幅暴增成一大塊直式區塊），
       文字跟視覺圖示縮小尺寸、垂直置中對齊，整體維持扁平的長方形比例，只是等比縮小展示。 */
    .hero{ flex-direction:row; align-items:center; padding:18px 16px; text-align:left; gap:12px; border-radius:12px; min-width:0; }
    .hero.hero-banner{ padding:0; flex-direction:column; }
    .hero-text{ max-width:none; min-width:0; flex:1 1 auto; }
    .hero-eyebrow{ font-size:10.5px; margin-bottom:4px; }
    .hero-text h1{ font-size:15px; margin:0 0 4px; line-height:1.35; }
    .hero-text p{ font-size:11px; margin:0 0 10px; line-height:1.5; }
    .hero-cta{ padding:7px 14px; font-size:11.5px; }
    .hero-visual{ width:56px; height:56px; font-size:20px; flex-shrink:0; margin:0; }

    .section-head{ margin:32px 0 14px; }
    .list-head{ flex-direction:column; align-items:flex-start; gap:10px; margin:20px 0 16px; }
    .list-head select{ width:100%; }
    .section-head h2{ font-size:18.5px; }

    .sf-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
    .sf-card-body{ padding:10px 10px 12px; }
    .sf-card-name{ font-size:13.5px; }
    .sf-card-price{ font-size:15px; }

    .pd-layout{ grid-template-columns: 1fr; gap:20px; }
    .pd-thumb{ width:60px; height:60px; }
    .pd-title{ font-size:20px; }
    .pd-price{ font-size:22px; }
    .pd-price-row{ flex-wrap:wrap; }
    .pd-purchase-row{ gap:8px; }
    .qty-stepper{ height:42px; }
    .qty-stepper button{ width:34px; }
    .qty-stepper .qty-val{ width:28px; font-size:14.5px; }
    .pd-actions{ gap:8px; }
    .pd-actions button{ height:42px; font-size:13px; padding:0 4px; }
    .pd-tabs{ flex-wrap:nowrap; }
    .pd-tab{ flex: 1 1 0; padding:12px 4px; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pd-tab-panel{ padding:18px 16px; }

    .seller-banner{ flex-direction:column; text-align:center; padding:22px 18px; }
    .seller-info p{ max-width:none; }
    .seller-stats{ justify-content:center; }

    .svc-avail-section{ padding:18px 16px; margin: 24px 0 30px; }
    .checkout-layout{ grid-template-columns: 1fr; gap:20px; }
    .checkout-identity-toggle{ flex-direction:column; }
    .checkout-form-card{ padding:18px 16px; }
    .checkout-summary{ padding:18px 16px; }
    .register-hero{ padding:22px 20px; }
    .register-hero h1{ font-size:22px; }
    .register-layout{ grid-template-columns: 1fr; gap:16px; }
    .register-main{ padding:20px 18px; }
    .register-side{ padding:20px 18px; }
    .register-steps{ flex-wrap:wrap; }
    .svc-booking-layout{ grid-template-columns: 1fr; gap:22px; }
    .svc-cal-col{ max-width:280px; margin:0 auto; }

    .footer-inner{ grid-template-columns: 1fr 1fr; gap:28px 20px; }
    .footer-brand{ grid-column: 1 / -1; }
  }


/* ============================================================
   以下為賣家中心後台樣式（與上方前台樣式共用 :root 變數與版型元件）
   ============================================================ */

  /* ---------- Header ---------- */
  header.site-header{
    background:#fff;
    border-bottom:1px solid var(--border);
    position: sticky;
    top:0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(30,38,32,.03), 0 2px 10px rgba(30,38,32,.04);
  }
  .header-inner{
    max-width: 1400px;
    margin:0 auto;
    padding: 14px 24px;
    display:flex;
    align-items:center;
    gap: 20px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:23px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .logo .logo-mark{
    width:28px;height:28px;
    background: var(--primary);
    color:#fff;
    border-radius: 6px;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;
    font-weight: 800;
  }
  .header-search{
    flex:1;
    position: relative;
    max-width: none;
  }
  .header-search input{
    width:100%;
    padding: 9px 40px 9px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size:14.5px;
    font-family: inherit;
    outline: none;
    background: #fafafa;
  }
  .header-search input:focus{ border-color:#bbb; background:#fff; }
  .header-search svg.search-default-icon{
    position:absolute; right:14px; top:50%; transform: translateY(-50%);
    color:#888;
  }
  .header-actions{
    display:flex;
    align-items:center;
    gap: 14px;
    flex-shrink:0;
  }
  .icon-btn{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    width:22px;height:22px;
    color: var(--text-main);
    cursor:pointer;
  }
  .icon-btn .dot{
    position:absolute; top:-3px; right:-3px;
    width:7px;height:7px;background:#000;border-radius:50%;
  }
  .pill-btn{
    padding: 9px 20px;
    border-radius: 999px;
    font-size:14.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor:pointer;
    border: 1.5px solid var(--text-main);
    background:#fff;
    color: var(--text-main);
  }
  .pill-btn.solid{
    background: var(--primary); color:#fff; border-color:var(--primary);
  }

  /* ---------- Layout ---------- */
  .page-wrap{
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 60px;
    display:flex;
    gap: 28px;
    align-items:flex-start;
  }

  /* Sidebar (desktop) */
  .sidebar{
    width: 260px;
    flex-shrink:0;
  }
  .store-card{
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
  }
  .store-card h2{
    margin:0 0 8px;
    font-size:19px;
    font-weight: 800;
  }
  .store-card p{
    margin:0;
    font-size:13.5px;
    color: var(--text-sub);
  }
  .side-nav{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .nav-group{
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow:hidden;
  }
  .side-nav button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    text-align:left;
    padding: 14px 20px;
    border:none;
    background: transparent;
    font-size:15px;
    font-family: inherit;
    color: var(--text-main);
    cursor:pointer;
    border-bottom: 1px solid var(--border);
  }
  .nav-group button:last-child{ border-bottom:none; }
  .side-nav button.active{
    background: var(--primary);
    color:#fff;
    font-weight:600;
  }
  .nav-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    background:var(--primary); color:#fff; font-size:11.5px; font-weight:800;
    margin-left:auto;
  }
  .side-nav button.active .nav-badge{ background:#fff; color:var(--primary); }
  .nav-badge:empty{ display:none; }
  .side-nav button:hover:not(.active){ background:#f7f7f7; }

  /* ================================================================
     平台管理後台（Muajee Admin）— 扁平黑白風格，跟賣家中心的深藍風格刻意做出區隔，
     讓使用者一眼就能分辨「現在是在平台層級、還是某個賣家自己的後台」。
     ================================================================ */
  .platform-header .header-inner{ border-bottom:none; padding-bottom:0; }
  .platform-header .logo-mark{ background:var(--primary); border-radius:8px; }
  .platform-header .logo-text{ font-weight:800; }
  .platform-nav{
    max-width: 1400px; margin: 0 auto;
    display:flex; gap:10px; flex-wrap:wrap; padding:14px 24px 18px; border-bottom:1px solid var(--border);
  }
  .platform-nav button{
    padding:9px 18px; border-radius:999px; border:1.5px solid #d9d3c7; background:#fff;
    font-size:14.5px; font-weight:700; font-family:inherit; cursor:pointer; color:#2a2a2a;
    transition: all .18s ease;
  }
  .platform-nav button:hover:not(.active){ border-color:var(--primary); }
  .platform-nav button.active{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow: var(--shadow-sm); }
  .platform-nav button.nav-highlight{
    display:inline-flex; align-items:center; gap:6px;
    border-color:var(--primary); color:var(--primary); background:#fff;
  }
  .platform-nav button.nav-highlight.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
  .platform-nav .nav-icon-badge{
    width:18px; height:18px; font-size:12px; margin-right:0;
    background:transparent; border:none;
  }

  .platform-main{ max-width:1400px; margin:0 auto; padding:28px 24px 60px; }
  .platform-panel{ display:none; }
  .platform-panel.active{ display:block; }

  .pf-welcome-banner{
    background: linear-gradient(120deg, var(--primary-dark), var(--primary) 55%, var(--primary-light));
    border-radius:16px; padding:32px 36px; color:#fff; margin-bottom:24px;
    box-shadow: 0 16px 36px rgba(30,38,32,.25), 0 4px 10px rgba(30,38,32,.12);
  }
  .pf-welcome-banner h1{ font-size:25px; font-weight:800; margin:0 0 8px; }
  .pf-welcome-banner p{ font-size:15px; opacity:.9; margin:0; }

  .pf-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
  .pf-stat-card{
    display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:20px 22px; box-shadow: var(--shadow-xs); transition: box-shadow .2s ease;
  }
  .pf-stat-card:hover{ box-shadow: var(--shadow-sm); }
  .pf-stat-icon{ width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
  .pf-stat-label{ font-size:13.5px; color:var(--text-sub); margin-bottom:4px; }
  .pf-stat-value{ font-size:25px; font-weight:800; }
  .pf-stat-note{ font-size:12px; color:var(--text-sub); margin-top:2px; }
  .pf-stat-note.pf-note-up{ color:var(--text-main); font-weight:700; }

  .pf-dashboard-cols{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
  .pf-card{
    background:#fff; border:1px solid var(--border); border-radius:12px; padding:22px 24px; box-shadow: var(--shadow-xs);
  }
  .pf-settings-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; align-items:start; margin-bottom:24px; }
  .pf-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
  .pf-card-head h3{ font-size:16px; font-weight:800; margin:0; }
  .pf-link{ font-size:13px; font-weight:700; color:var(--primary); cursor:pointer; }
  .pf-pending-item{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border); }
  .pf-pending-item:last-child{ border-bottom:none; }
  .pf-pending-avatar{
    width:34px; height:34px; border-radius:8px; background:var(--bg-page); color:var(--text-main);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14.5px; flex-shrink:0;
  }
  .pf-pending-title{ font-size:15px; font-weight:700; }
  .pf-pending-meta{ font-size:13px; color:var(--text-sub); }
  .pf-pending-time{ font-size:12px; color:#bbb; margin-top:2px; }
  .pf-empty-hint{ font-size:13.5px; color:var(--text-sub); padding:20px 0; text-align:center; }

  .pf-quick-actions{ display:flex; flex-direction:column; gap:10px; }
  .pf-quick-actions button{
    display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:8px; border:1px solid var(--border);
    background:#fafbfc; font-size:14.5px; font-weight:700; font-family:inherit; cursor:pointer; color:var(--text-main); text-align:left;
  }
  .pf-quick-actions button:hover{ border-color:var(--primary); }
  .pf-qa-icon{ font-size:16px; }

  .pf-page-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:14px; flex-wrap:wrap; }
  .pf-page-head h1{ font-size:25px; font-weight:800; margin:0 0 6px; }
  .pf-sub{ font-size:14.5px; color:var(--text-sub); margin:0; }

  .pf-filter-tabs{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
  .pf-filter-tabs button{
    padding:9px 16px; border-radius:999px; border:1.5px solid var(--border-strong); background:#fff;
    font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer; color:var(--text-main);
  }
  .pf-filter-tabs button.active{ background:var(--primary); color:#fff; }

  .pf-filter-row{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
  .pf-filter-row select{
    padding:9px 14px; border-radius:999px; border:1.5px solid var(--border-strong); background:#fff;
    font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer; color:var(--text-main);
  }

  .pf-search-wrap{ position:relative; }
  .pf-search-wrap input{
    padding:9px 34px 9px 14px; border:1px solid var(--border); border-radius:8px; font-size:14.5px; font-family:inherit;
    width:260px; outline:none;
  }
  .pf-search-wrap input:focus{ border-color:var(--primary); }
  .pf-search-wrap svg{ position:absolute; right:11px; top:50%; transform:translateY(-50%); color:#999; }

  .pf-seller-name-cell{ display:flex; align-items:center; gap:10px; }
  .pf-seller-avatar{
    width:30px; height:30px; border-radius:8px; background:var(--primary); color:#fff; font-weight:800; font-size:13px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .pf-icon-btn{
    width:30px; height:30px; border-radius:6px; border:1px solid var(--border); background:#fff;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:14.5px;
  }
  .pf-icon-btn:hover{ border-color:var(--primary); }
  .pf-icon-btn.pf-danger{ color:var(--text-main); border-color:var(--border-strong); }
  .pf-icon-btn.pf-approve{ color:var(--text-main); border-color:var(--border-strong); }

  /* 平台後台的表格操作按鈕：改用「文字標籤＋足夠尺寸」取代純圖示小按鈕，更好點擊、意圖更清楚 */
  .pf-row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .pf-action-btn{
    padding:8px 14px; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer;
    font-family:inherit; border:1.5px solid var(--border-strong); background:#fff; color:var(--text-main);
    white-space:nowrap; transition: all .15s ease;
  }
  .pf-action-btn:hover{ border-color:var(--primary); background:#fafaf8; }
  .pf-action-btn.pf-action-primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
  .pf-action-btn.pf-action-primary:hover{ background:var(--primary-dark); }
  .pf-action-btn.pf-action-danger:hover{ background:var(--danger-bg); border-color:var(--text-sub); }

  .pf-module-card{
    background:#fff; border:1px solid var(--border); border-radius:10px; padding:18px 20px; margin-bottom:14px;
  }
  .pf-module-head{ display:flex; align-items:center; gap:14px; }
  .pf-module-drag{ color:#ccc; cursor:grab; font-size:15px; }
  .pf-module-title{ font-size:15.5px; font-weight:800; }
  .pf-module-sub{ font-size:12.5px; color:var(--text-sub); margin-top:2px; }
  .pf-module-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
  .pf-mini-switch{ position:relative; width:38px; height:22px; flex-shrink:0; }
  .pf-mini-switch input{ opacity:0; width:0; height:0; position:absolute; }
  .pf-mini-switch-track{
    position:absolute; inset:0; border-radius:999px; background:#d7dbe0; cursor:pointer; transition:.2s;
  }
  .pf-mini-switch-track::before{
    content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.2s;
  }
  .pf-mini-switch input:checked + .pf-mini-switch-track{ background:var(--primary); }
  .pf-mini-switch input:checked + .pf-mini-switch-track::before{ transform:translateX(16px); }
  .pf-module-edit-btn{
    padding:8px 16px; border-radius:6px; border:none; background:var(--primary); color:#fff;
    font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
  }
  .pf-module-disabled-note{ font-size:13px; color:#bbb; text-align:center; padding:14px 0 2px; }

  .banned-word-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .banned-word-chip{
    display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 12px; border-radius:999px;
    background:var(--primary); color:#fff; font-size:13px; font-weight:700;
  }
  .banned-word-chip button{ border:none; background:none; color:var(--text-main); cursor:pointer; font-size:14.5px; line-height:1; }

  /* ---------- 商家結算：統計卡片 + 4 張控制卡片（2x2）+ 已繳／未繳雙列表 ---------- */
  .pf-settle-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
  .pf-settle-stat-card{
    background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px 20px; box-shadow: var(--shadow-xs);
  }
  .pf-settle-stat-card .lbl{ font-size:13px; color:var(--text-sub); margin-bottom:6px; }
  .pf-settle-stat-card .val{ font-size:25px; font-weight:800; }
  .pf-settle-controls{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:24px; }
  .pf-settle-control-card h3{ font-size:15px; font-weight:800; margin:0 0 8px; }
  .pf-settle-control-desc{ font-size:13px; color:var(--text-sub); line-height:1.75; margin:0 0 16px; }
  .pf-settle-control-card{ display:flex; flex-direction:column; }
  .pf-restrict-status{ font-size:13.5px; font-weight:700; color:var(--text-sub); white-space:nowrap; margin-left:12px; vertical-align:middle; }
  #executeRestrictionBtn{
    background:var(--primary); border-color:var(--primary); color:#fff; opacity:1; align-self:flex-start;
  }
  #executeRestrictionBtn:disabled{ background:#eee; border-color:#eee; color:#aaa; cursor:not-allowed; }

  .pf-pay-badge{
    display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:700;
  }
  .pf-pay-ontime{ background:var(--success-bg); color:var(--success-text); }
  .pf-pay-overdue{ background:var(--danger-bg); color:var(--danger-text); }
  .pf-pay-notdue{ background:var(--border); color:var(--text-sub); }
  /* 賣家中心「平台費用」頁是暖色例外，狀態徽章跟著頁面基調走，不用全站黑白 */
  #sellerFeeStatGrid .pf-pay-ontime{ background:#fdf0da; color:#c9791a; }
  #sellerFeeStatGrid .pf-pay-overdue{ background:#fdeeea; color:#c0532e; }
  #sellerFeeStatGrid .pf-pay-notdue{ background:#fff6e0; color:#9a7a1f; }

  /* ---------- 賣家中心：顯示這家店在平台的手續費繳款狀況（資料來自平台管理後台）---------- */
  .seller-fee-card{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    background:#fafbfc; border:1px solid var(--border); border-radius:10px; padding:18px 22px; margin-bottom:24px;
  }
  .seller-fee-stats{ display:flex; gap:32px; flex-wrap:wrap; }
  .seller-fee-stat-label{ font-size:12.5px; color:var(--text-sub); margin-bottom:3px; }
  .seller-fee-stat-value{ font-size:18.5px; font-weight:800; }

  /* ---------- 賣家中心「平台費用」獨立頁面 ---------- */

  /* 頂部「一起賺了多少」正向框架區塊：大大方方秀出總營業額，用視覺化長條圖
     呈現手續費其實只占一小部分，不是憑空被抽走一大筆，降低賣家對繳費的反感。 */
  /* 平台費用頁面是刻意的例外：不套用全站黑白色系，改用溫暖、討喜的漸層色，
     強調「平台幫賣家賺了多少錢」，讓繳費這件事感覺舒服、不像被抽成。 */
  .pf-fee-split-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
  .pf-fee-left-col{ min-width:0; }
  .pf-fee-right-col{ min-width:0; }

  .pf-fee-hero{
    background: linear-gradient(150deg, #c9791a 0%, #e0952c 42%, #f0b64a 100%);
    border-radius:18px; padding:28px 26px; margin-bottom:18px; color:#fff;
    box-shadow: 0 16px 36px rgba(201,121,26,.32), 0 4px 10px rgba(201,121,26,.16);
    position:relative; overflow:hidden;
  }
  .pf-fee-hero::after{
    content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.2), transparent 70%);
  }
  .pf-fee-hero-label{ font-size:14.5px; font-weight:700; opacity:.9; margin-bottom:6px; position:relative; }
  .pf-fee-hero-amount{ font-size:35px; font-weight:800; margin-bottom:18px; letter-spacing:-.01em; position:relative; }
  .pf-fee-split-bar{
    display:flex; height:14px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.24); margin-bottom:12px; position:relative;
  }
  .pf-fee-split-earn{ background:#fff6da; transition: width .5s ease; }
  .pf-fee-split-fee{ background:rgba(255,255,255,.35); transition: width .5s ease; }
  .pf-fee-split-legend{ display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; position:relative; }
  .pf-fee-split-legend span{ display:flex; align-items:center; gap:7px; opacity:.95; }
  .pf-fee-split-legend .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
  .pf-fee-split-legend .dot.earn{ background:#fff6da; }
  .pf-fee-split-legend .dot.fee{ background:rgba(255,255,255,.6); }

  .pf-fee-stat-grid{ display:flex; flex-direction:column; gap:12px; }
  .pf-fee-stat-card{
    background: linear-gradient(120deg, #fffcf7, #fef6e9);
    border:1px solid #f0dfba; border-radius:12px; padding:16px 20px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .pf-fee-stat-card .lbl{ font-size:13.5px; color:var(--text-sub); }
  .pf-fee-stat-card .val{ font-size:21px; font-weight:800; }
  .pf-fee-stat-card .val.pf-fee-earn{ color:#c9791a; }
  .pf-fee-invoice{
    background:#fff; border:1px solid var(--border); border-radius:12px; padding:22px 24px; box-shadow: var(--shadow-xs);
  }
  .pf-fee-invoice h3{ font-size:16px; font-weight:800; margin:0 0 4px; }
  .pf-fee-invoice .pf-fee-sub{ font-size:13px; color:var(--text-sub); margin:0 0 18px; }
  .pf-fee-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:14.5px; }
  .pf-fee-row:last-of-type{ border-bottom:none; }
  .pf-fee-row .k{ color:var(--text-sub); }
  .pf-fee-row .v{ font-weight:700; }
  .pf-fee-total-row{ display:flex; justify-content:space-between; padding:14px 0 0; margin-top:6px; border-top:2px solid #c9791a; font-size:17px; font-weight:800; }
  .pf-fee-total-row .v{ color:#c9791a; }
  .pf-fee-instructions{
    background:#fffaf1; border:1px dashed #f0dfba; border-radius:8px; padding:14px 16px; margin:18px 0; font-size:13.5px; color:var(--text-sub); line-height:1.9;
  }
  .pf-fee-instructions strong{ color:var(--text-main); }

  /* 「這筆服務費包含什麼」互動展開區塊，讓賣家清楚知道錢花去哪，而不是單純被抽成 */
  .pf-fee-breakdown{ margin:16px 0; border:1px solid #f0dfba; border-radius:8px; overflow:hidden; }
  .pf-fee-breakdown-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
    background:#fffaf1; border:none; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--text-main);
  }
  .pf-fee-breakdown-toggle .chev{ transition: transform .2s ease; color:#c9791a; }
  .pf-fee-breakdown.open .pf-fee-breakdown-toggle .chev{ transform: rotate(180deg); }
  .pf-fee-breakdown-content{ display:none; padding:14px 16px; font-size:13px; color:var(--text-sub); line-height:2; }
  .pf-fee-breakdown.open .pf-fee-breakdown-content{ display:block; }
  .pf-fee-breakdown-content li{ margin-bottom:2px; }

  .pf-fee-pay-btn{
    width:100%; height:48px; border-radius:999px; border:none; background:#e0952c; color:#fff;
    font-size:15.5px; font-weight:800; cursor:pointer; font-family:inherit;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease; box-shadow: 0 4px 14px rgba(224,149,44,.32);
  }
  .pf-fee-pay-btn:hover{ background:#c9791a; box-shadow: 0 8px 20px rgba(224,149,44,.4); transform: translateY(-1px); }
  .pf-fee-pay-btn:disabled{ background:var(--border); color:var(--text-placeholder); cursor:not-allowed; box-shadow:none; transform:none; }
  .pf-fee-paid-note{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:#fdf0da; color:#c9791a; border-radius:999px; height:48px; font-size:15px; font-weight:700;
  }

  /* ---------- 側邊選單「重點項目」樣式：預約客戶訂單／訂單管理,
     用固定尺寸的圖示徽章 + 左側色條，跟其他項目做出區隔，但排版一樣工整、不會歪掉 ---------- */
  .nav-highlight{
    border-left: 3px solid var(--primary);
    background: #f7f9fc;
    font-weight: 700;
  }
  .nav-highlight.active{ border-left-color:#fff; }
  .nav-icon-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; flex-shrink:0; font-size:13px;
    background:#fff; border:1px solid var(--border); border-radius:6px; margin-right:10px;
  }
  .nav-highlight.active .nav-icon-badge{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); }

  /* Mobile top tabs */
  .mobile-tabs{
    display:none;
  }

  /* ---------- Main content ---------- */
  .main-content{ flex:1; min-width:0; }
  .content-card{
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    box-shadow: var(--shadow-sm);
  }
  .content-head{
    display:flex;
    flex-wrap: wrap; /* 空間不夠時，右邊的按鈕自動換到下一行，不會硬擠壓文字或把按鈕文字擠變形 */
    justify-content:space-between;
    align-items:flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .content-head h1{
    margin:0 0 6px;
    font-size:27px;
    font-weight: 800;
  }
  .content-head .sub{
    font-size:14.5px;
    color: var(--text-sub);
    margin:0;
  }
  .content-head .head-side{
    font-size:14.5px;
    color: var(--text-sub);
    white-space: nowrap;
    padding-top: 4px;
  }

  .section-block{ margin-bottom: 30px; }
  .section-block h3{
    font-size:16px;
    font-weight: 800;
    margin: 0 0 4px;
  }
  .section-block .hint{
    font-size:13.5px;
    color: var(--text-sub);
    margin: 0 0 14px;
    line-height:1.7;
  }

  .form-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .form-field{ display:flex; flex-direction:column; gap:6px; }
  .form-field.full{ grid-column: 1 / -1; }
  .form-field label{
    font-size:14.5px;
    font-weight: 700;
    color: var(--text-main);
  }
  .form-field label .req{ color:var(--text-main); margin-left:2px; font-weight:800; }
  .form-field input[type=text],
  .form-field input[type=email],
  .form-field input[type=password],
  .form-field input[type=number],
  .form-field textarea,
  .form-field select{
    width:100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size:15px;
    font-family: inherit;
    color: var(--text-main);
    outline:none;
    background:#fff;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .form-field input:focus,
  .form-field textarea:focus,
  .form-field select:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,38,32,.08); }
  .form-field textarea{ resize: vertical; min-height: 90px; }
  .form-field .note{ font-size:12.5px; color:var(--text-sub); }
  .input-icon-wrap{ position:relative; }
  .input-icon-wrap input{ padding-right: 38px; }
  .input-icon-wrap svg{ position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#999; }

  .check-row{
    display:flex; align-items:center; gap:8px;
    font-size:15px; font-weight:700;
    margin-bottom: 4px;
  }
  .check-row input{ width:16px;height:16px; }

  /* ---------- 收款方式：左右並排卡片，複選開關做成明顯的切換樣式 ---------- */
  .payment-methods-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:start; }
  .payment-method-card{
    border:1px solid var(--border); border-radius:10px; padding:20px 22px; background:#fafbfc;
  }
  .pm-toggle-row{
    display:flex; align-items:center; gap:12px; cursor:pointer; margin-bottom:10px;
  }
  .pm-checkbox{ position:absolute; opacity:0; width:0; height:0; }
  .pm-toggle-visual{
    position:relative; width:42px; height:24px; border-radius:999px; background:#d7dbe0; flex-shrink:0; transition:.2s;
  }
  .pm-toggle-visual::before{
    content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.2s;
  }
  .pm-checkbox:checked + .pm-toggle-visual{ background: var(--primary); }
  .pm-checkbox:checked + .pm-toggle-visual::before{ transform: translateX(18px); }
  .pm-toggle-label{ font-size:16px; font-weight:800; }
  .pm-field-stack{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
  .pm-field-stack .form-field{ margin:0; }

  /* 綠界測試按鈕：跟卡片其他欄位對齊、整齊排列，不破壞原本收款方式卡片的風格 */
  .pm-test-row{
    display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border);
    flex-wrap:wrap;
  }
  .pm-test-btn{ flex:none; padding:8px 16px; font-size:13.5px; height:auto; }
  .pm-test-hint{ font-size:12px; color:var(--text-sub); line-height:1.6; flex:1; min-width:180px; }

  .file-row{ display:flex; align-items:center; gap:12px; }
  .file-btn{
    padding: 8px 16px;
    border:1px solid var(--border);
    border-radius: 4px;
    background:#f5f5f5;
    font-size:14.5px;
    cursor:pointer;
  }
  .file-row .file-name{ font-size:13.5px; color:var(--text-sub); }

  .btn-row{
    display:flex;
    gap: 12px;
    justify-content:flex-end;
    margin-top: 8px;
  }
  .btn{
    padding: 12px 28px;
    border-radius: 8px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    border:1px solid var(--border);
    font-family: inherit;
    transition: box-shadow .2s ease, transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .btn.secondary{ background:#f7f6f3; color: var(--text-main); border-color:var(--border); }
  .btn.secondary:hover{ background:#efede8; }
  .btn.primary{ background: var(--primary); color:#fff; border-color:var(--primary); flex:1; box-shadow: var(--shadow-sm); }
  .btn.primary:hover{ background: var(--primary-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .btn.block{ width:100%; }
  .btn-inline{
    display:inline-block;
    padding: 8px 18px;
    border-radius: 4px;
    font-size:14.5px;
    font-weight:700;
    cursor:pointer;
    border:1px solid var(--primary);
    background: var(--primary);
    color:#fff;
    font-family: inherit;
    white-space: nowrap; /* 按鈕文字絕對不換行，寬度不夠時讓外層 .content-head 自己換成兩行排列 */
    flex-shrink: 0; /* 版面擠壓時優先讓左邊的標題／說明文字縮小，按鈕本身維持完整大小不被壓扁 */
  }

  hr.divider{ border:none; border-top:1px solid var(--border); margin: 28px 0; }

  /* ---------- Data table (div-grid based, responsive) ---------- */
  .dtable{ border:1px solid var(--border); border-radius:10px; overflow-x:auto; box-shadow: var(--shadow-xs); }
  /* 表格標題文字絕對不從中間斷行（例如「可提供服務」不會被拆成「可提供服／務」兩行），
     寬度真的不夠時交給 .dtable 的 overflow-x:auto 讓使用者左右滑動查看，而不是硬把字拆開 */
  .dtable-head > div{ white-space: nowrap; }
  .dtable-head, .dtable-row{
    display:grid;
    align-items:center;
    padding: 12px 16px;
  }
  .dtable-head{
    background:#fafafa;
    font-size:13.5px;
    font-weight:700;
    color: var(--text-sub);
    border-bottom:1px solid var(--border);
  }
  .dtable-row{
    font-size:15px;
    border-bottom:1px solid var(--border);
    transition: background .15s ease;
  }
  .dtable-row:hover{ background: #fafaf8; }
  .dtable-row:last-child{ border-bottom:none; }
  .dtable-empty{
    padding: 40px 16px;
    text-align:center;
    color: var(--text-sub);
    font-size:15px;
  }

  /* ---------- 商品分類：大類目／子類目樹狀列表 ----------
     唯讀模式（賣家中心，4 欄）跟可編輯模式（平台管理後台，多一欄「操作」＝5 欄）
     欄位比例分開定義，兩邊各自對齊自己的表頭，不會共用同一組導致跑版。 ---------- */
  .cat-parent-row, .cat-sub-row{
    display:grid; grid-template-columns: 1fr 130px 130px 110px; gap:8px; align-items:center;
  }
  .cat-parent-row:not(.cat-parent-row-view), .cat-sub-row:not(.cat-sub-row-view){
    grid-template-columns: 1.6fr 1.2fr 1fr 1fr 1.4fr;
  }
  .cat-parent-row{
    padding: 12px 16px; border-bottom:1px solid var(--border); font-size:15px; background:#fafbfc;
  }
  .cat-parent-name{ display:flex; align-items:center; gap:8px; font-weight:800; cursor:pointer; }
  .cat-toggle-icon{ display:inline-block; width:14px; transition: transform .15s; color:var(--text-sub); font-size:12px; }
  .cat-toggle-icon.open{ transform: rotate(90deg); }
  .cat-sub-row{
    padding: 10px 16px 10px 40px; border-bottom:1px solid var(--border); font-size:14.5px; color:var(--text-main);
  }
  .cat-sub-row .cat-sub-name::before{ content:"— "; color:var(--text-sub); }
  .cat-children-wrap.collapsed{ display:none; }
  .cols-4b{ grid-template-columns: 1fr 130px 130px 110px; gap:8px; }

  /* ---------- 商品分類（平台管理後台的可編輯模式）操作按鈕，賣家中心唯讀模式不會用到 ---------- */
  .cat-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
  .cat-row-actions button{
    padding:5px 10px; border-radius:4px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
    border:1px solid var(--border); background:#fff;
  }
  .cat-btn-add{ color:var(--primary); border-color:var(--border-strong); }
  .cat-btn-edit{ color:var(--text-main); }
  .cat-btn-edit:hover{ border-color:var(--primary); }
  .cat-btn-del{ color:var(--text-main); border-color:var(--border-strong); }
  .cat-btn-del:hover{ background:var(--danger-bg); }

  .cols-5{ grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap:8px; }
  .cols-6{ grid-template-columns: 0.8fr 1.6fr 1fr 1fr 1fr 1.4fr; gap:8px; }
  .cols-5b{ grid-template-columns: 1.6fr 1.2fr 1fr 1fr 1.4fr; gap:8px; }
  .cols-7{ grid-template-columns: 1.2fr 1fr 0.9fr 1.1fr 0.9fr 0.9fr 1.2fr; gap:8px; }
  .cols-6d{ grid-template-columns: 1.3fr 1fr 1fr 1fr 0.9fr 1.3fr; gap:8px; }

  /* ---------- 訂單管理：商品名稱／規格／數量／買家／金額／狀態／訂單編號／查看，共 8 欄 ---------- */
  .cols-order{ grid-template-columns: 1.6fr 1fr 0.6fr 1fr 1fr 1fr 1.3fr 0.7fr; gap:10px; }
  #productOrderTable .dtable-row{
    min-height: 60px; /* 至少兩行文字的高度，不要擠成單行 */
    align-items:center;
  }
  #productOrderTable .dtable-row > div:not(.po-row-actions){
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* 訂單管理欄位比例改成商品名稱/規格/數量/買家/金額/狀態/訂單編號/操作，操作欄放兩顆按鈕要寬一點 */
  .cols-porder2{ grid-template-columns: 1.4fr 0.9fr 0.5fr 0.9fr 0.9fr 0.9fr 1.2fr 1.6fr; gap:10px; }
  .cols-returns{ grid-template-columns: 1.3fr 0.7fr 1fr 1.5fr 0.9fr 0.9fr 1.3fr; gap:10px; }
  .cols-invite{ grid-template-columns: 1.3fr 0.9fr 1.3fr 1fr 1fr; gap:10px; }

  /* 訂單操作按鈕：比原本純文字連結更明顯、更容易點擊 */
  .po-row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .po-btn{
    padding:8px 14px; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer;
    font-family:inherit; border:1.5px solid var(--border-strong); background:#fff; color:var(--text-main);
    white-space:nowrap; transition: all .15s ease;
  }
  /* 完成類（完成出貨／完成訂單）＝高飽和淡綠、取消類（取消訂單）＝高飽和淡紅 */
  .po-btn-primary{ background:#e3f9ec; border-color:#a9e0c1; color:#1c8a52; }
  .po-btn-primary:hover{ background:#cdf3dc; border-color:#7fd6a3; }
  .po-btn-cancel{ background:#fdeceb; border-color:#f3b8b0; color:#c23b2e; }
  .po-btn-cancel:hover{ background:#fbd9d5; border-color:#ef9a8e; }
  .po-done-note{ font-size:13px; color:var(--text-placeholder); }

  /* ---------- 平台管理後台專用欄位比例 ---------- */
  .cols-order2{ grid-template-columns: 0.6fr 1.4fr 0.8fr 1.2fr 0.8fr 0.6fr 0.8fr 1.5fr; gap:10px; }
  .cols-pfprod{ grid-template-columns: 1.5fr 1.1fr 0.9fr 0.7fr 0.6fr 0.6fr 0.7fr 0.9fr; gap:10px; }
  .cols-pforder{ grid-template-columns: 1.3fr 1.3fr 0.9fr 0.8fr 0.8fr 0.9fr; gap:10px; }
  .cols-settle{ grid-template-columns: 1.6fr 1.2fr 1.2fr 1fr 0.9fr; gap:10px; }
  #sellerTable .dtable-row, #pfProductTable .dtable-row, #pfOrderTable .dtable-row, #settlementTable .dtable-row{
    min-height:52px; align-items:center;
  }
  #sellerTable .dtable-row > div:not(.row-actions), #pfOrderTable .dtable-row > div:not(.row-actions){
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .prod-name-cell-pf{ display:flex; align-items:center; gap:10px; overflow:hidden; }
  .prod-name-cell-pf img{ width:34px; height:34px; border-radius:6px; object-fit:cover; flex-shrink:0; }
  .prod-name-cell-pf span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .badge{
    display:inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.01em;
  }
  .badge.on{ background: var(--success-bg); color: var(--success-text); }
  .badge.off{ background: var(--danger-bg); color: var(--danger-text); }
  .badge.pending{ background:#fff; color:var(--text-main); border:1px solid var(--border-strong); }

  .row-actions{ display:flex; gap:8px; }
  .row-actions button{
    padding: 6px 14px;
    font-size:13.5px;
    border-radius:4px;
    cursor:pointer;
    font-family: inherit;
    font-weight:600;
  }
  .row-actions .edit-btn{ background:#eef1f4; border:1px solid var(--border); color: var(--text-main); }
  .row-actions .del-btn{ background:#fff; border:1px solid var(--border-strong); color:var(--text-main); }

  .thumb{
    width:44px;height:44px;border-radius:6px;
    background:#fff; border:1px solid var(--border);
    flex-shrink:0;
  }


  /* subpage: add-service form toggle */
  .subform{ display:none; }
  .subform.show{ display:block; }
  .listview.hide{ display:none; }

  /* ---------- Step badge ---------- */
  .step-badge{
    display:inline-block;
    background: var(--primary);
    color:#fff;
    font-size:12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 4px;
    margin-right: 9px;
    vertical-align: middle;
    position: relative;
    top: -2px;
  }

  /* ---------- 開放預約時間：左右 1:1 分欄（左：月曆／右：本月常規設定＋單日調整）---------- */
  .avail-split-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; }
  .avail-cal-col{ min-width:0; }
  .avail-settings-col{ min-width:0; }

  /* ---------- Info box (說明區塊) ---------- */
  .info-box{
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 18px;
  }
  .info-box p{
    margin: 0 0 8px;
    font-size:13.5px;
    line-height: 1.8;
    color: var(--text-main);
  }
  .info-box p:last-child{ margin-bottom:0; }
  .info-box strong{ color: var(--primary); }

  /* ---------- Modal (新增商品) ---------- */
  .modal-overlay{
    display:none;
    position: fixed;
    inset: 0;
    background: rgba(20,24,28,.5);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
  }
  .modal-overlay.show{ display:flex; }
  .modal-card{
    background:#fff;
    border-radius: 16px;
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 80px);
    display:flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
  }
  .modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink:0;
  }
  .modal-header h2{ margin:0; font-size:20px; font-weight:800; }
  .modal-close{
    border:none;
    background:transparent;
    font-size:23px;
    line-height:1;
    color:#999;
    cursor:pointer;
    padding:4px;
  }
  .modal-close:hover{ color:#333; }
  .modal-body{
    padding: 22px 24px;
    overflow-y: auto;
  }
  .modal-footer{
    display:flex;
    gap:12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    flex-shrink:0;
  }
  .modal-section{ margin-top: 22px; }
  .modal-section-label{
    display:block;
    font-size:14.5px;
    font-weight:700;
    margin-bottom:10px;
  }

  .img-tabs{
    display:flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
  }
  .img-tab{
    background:none;
    border:none;
    padding: 0 0 10px;
    font-size:15px;
    font-weight:700;
    color: var(--text-sub);
    cursor:pointer;
    border-bottom: 2px solid transparent;
    font-family: inherit;
  }
  .img-tab.active{ color: var(--primary); border-bottom-color: var(--primary); }

  .upload-drop{
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    padding: 34px 20px;
    text-align:center;
    cursor:pointer;
    background:#fafafa;
  }
  .upload-drop:hover{ border-color: var(--primary); background:var(--bg-page); }
  .upload-icon{ font-size:23px; color:#999; margin-bottom:8px; }
  .upload-text{ font-size:15px; font-weight:700; color:var(--text-main); }
  .upload-hint{ font-size:12.5px; color:var(--text-sub); margin-top:4px; }
  .upload-drop img{ max-width:100%; max-height:140px; border-radius:6px; }

  .url-row{ display:flex; gap:10px; }
  .url-row input{
    flex:1;
    padding: 10px 12px;
    border:1px solid var(--border);
    border-radius:4px;
    font-size:15px;
    font-family:inherit;
  }
  #urlPreviewWrap img{ max-width:160px; max-height:120px; border-radius:6px; margin-top:12px; border:1px solid var(--border); }

  .album-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .album-add-btn{
    display:flex; align-items:center; gap:8px;
    padding: 10px 16px;
    border: 1px dashed var(--border);
    border-radius:6px;
    background:#fafafa;
    font-size:14.5px;
    font-weight:700;
    color: var(--text-sub);
    cursor:pointer;
    font-family: inherit;
  }
  .album-add-icon{ font-size:15px; }
  .album-thumb{
    position:relative;
    width:56px; height:56px;
    border-radius:6px;
    overflow:hidden;
    border:1px solid var(--border);
    flex-shrink:0;
  }
  .album-thumb img{ width:100%; height:100%; object-fit:cover; }
  .album-thumb .album-remove{
    position:absolute; top:1px; right:1px;
    width:16px; height:16px;
    background:rgba(0,0,0,.6);
    color:#fff;
    border:none;
    border-radius:50%;
    font-size:12px;
    line-height:1;
    cursor:pointer;
  }

  .logistics-list{ display:flex; flex-direction:column; gap:10px; }
  .logistics-option{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding: 12px 14px;
    border:1px solid var(--border);
    border-radius:6px;
    cursor:pointer;
    font-size:13.5px;
    color:var(--text-sub);
    line-height:1.6;
  }
  .logistics-option:has(input:checked){
    border-color: var(--primary);
    background:var(--bg-page);
  }
  .logistics-option input{ margin-top:3px; flex-shrink:0; }
  .logistics-option .lg-text strong{ color:var(--text-main); font-size:14.5px; }

  /* ---------- Success modal ---------- */
  .success-card{
    max-width: 380px;
    text-align:center;
    padding: 36px 28px 28px;
    position:relative;
  }
  .success-card .modal-close{ position:absolute; top:12px; right:14px; }
  .success-icon{
    width:52px; height:52px;
    border-radius:50%;
    background: var(--success-bg);
    color: var(--success-text);
    font-size:27px;
    font-weight:800;
    display:flex; align-items:center; justify-content:center;
    margin: 0 auto 16px;
  }
  .success-card h3{ margin:0 0 8px; font-size:18.5px; font-weight:800; }
  .success-card p{ margin:0 0 22px; font-size:14.5px; color:var(--text-sub); line-height:1.7; }

  /* ---------- Product grid (縮圖卡片) ---------- */
  .product-grid{
    display:grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }
  .product-card{
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow:hidden;
    background:#fff;
    display:flex;
    flex-direction:column;
  }
  .pc-image{
    position:relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg,#e8ecef,#d8dee3);
    overflow:hidden;
  }
  .pc-image img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pc-badge{
    position:absolute;
    top:8px; left:8px;
    padding: 3px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
  }
  .pc-badge.on{ background: var(--success-bg); color: var(--success-text); }
  .pc-badge.off{ background:#eee; color:#888; }
  .pc-body{ padding:12px 13px 4px; flex:1; }
  .pc-name{
    font-size:15px;
    font-weight:700;
    margin-bottom:4px;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .pc-meta{ font-size:12.5px; color:var(--text-sub); margin-bottom:8px; }
  .pc-price{ font-size:17px; font-weight:800; color:var(--text-main); }
  .pc-stock{ font-size:12.5px; color:var(--text-sub); margin-top:2px; }
  .pc-footer{
    display:flex;
    gap:8px;
    padding: 10px 13px 13px;
  }
  .pc-footer button{
    flex:1;
    padding: 7px 6px;
    font-size:13px;
    border-radius:4px;
    cursor:pointer;
    font-weight:600;
    font-family: inherit;
  }
  .pc-footer .edit-btn{ background:#eef1f4; border:1px solid var(--border); color: var(--text-main); }
  .pc-footer .del-btn{ background:#fff; border:1px solid var(--border-strong); color:var(--text-main); }

  .img-preview-wrap{ position:relative; display:inline-block; }
  .img-remove-btn{
    position:absolute;
    top:8px; right:8px;
    width:26px; height:26px;
    border-radius:50%;
    background:rgba(20,20,20,.65);
    color:#fff;
    border:none;
    font-size:15px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .img-remove-btn:hover{ background:rgba(20,20,20,.85); }

  /* ---------- STEP 1：快速套用開放時間 ---------- */
  .quickset-grid{
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fafafa;
    overflow: hidden;
  }
  .quickset-row{
    display:flex;
    align-items:center;
    gap: 20px;
    padding: 16px 18px;
    flex-wrap: wrap;
  }
  .quickset-row + .quickset-row{ border-top: 1px solid var(--border); }
  .qs-day{
    font-size:16px;
    font-weight: 800;
    width: 90px;
    flex-shrink:0;
  }
  .qs-day em{ display:block; font-style:normal; font-weight:400; font-size:12.5px; color:var(--text-sub); }
  .radio-group{ display:flex; gap:8px; flex-shrink:0; }
  .radio-pill{
    display:flex;
    align-items:center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background:#fff;
    font-size:14.5px;
    font-weight: 700;
    color: var(--text-sub);
    cursor:pointer;
  }
  .radio-pill input{ margin:0; }
  .radio-pill:has(input:checked){
    border-color: var(--primary);
    background: var(--bg-page);
    color: var(--primary);
  }
  .qs-time{ display:flex; align-items:center; gap:8px; }

  .btn-apply{
    display:block;
    width: 100%;
    margin-top: 16px;
    padding: 15px;
    border-radius: 6px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size:16px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
  }
  .btn-apply:hover{ background: var(--primary-dark); }
  .btn-apply.applied{
    background: #e4e4e4;
    color: #999;
    cursor: default;
    pointer-events: none;
  }

  /* ---------- STEP 2：單日調整卡片 ---------- */
  .day-edit-card{
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    background: #fafafa;
  }
  .day-quick-row{
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  .dq-btn{
    flex: 0 0 auto;
    min-width: 100px;
    padding: 11px 14px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: #fff;
    font-size:14.5px;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-main);
    font-family: inherit;
  }
  .dq-btn.dq-active.dq-open{ border-color: var(--primary); background:var(--bg-page); color:var(--primary); }
  .dq-btn.dq-active.dq-off{ border-color:var(--primary); background:var(--primary); color:#fff; }
  .wt-label-inline{ width:auto; padding-top:0; margin-left:4px; }

  .wt-label{
    font-size:13px;
    font-weight: 700;
    color: var(--text-sub);
    width: 68px;
    flex-shrink: 0;
  }
  .wt-time{
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size:14.5px;
    font-family: inherit;
    background:#fff;
    cursor: pointer;
  }
  .wt-time:disabled{ background:#f0f0f0; color:#bbb; cursor:not-allowed; }
  .wt-sep{ color: var(--text-sub); font-size:14.5px; }

  /* ---------- 時間快捷選擇彈窗（點時間輸入框跳出，輸入＋快捷並存）---------- */
  .time-picker-popup{
    position: absolute;
    z-index: 1200;
    background:#fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 10px;
    width: 216px;
  }
  .time-picker-hint{ font-size:12px; color:var(--text-sub); padding:2px 4px 8px; }
  .time-picker-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:6px;
    max-height: 220px;
    overflow-y: auto;
  }
  .tp-option{
    padding: 7px 4px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background:#fafafa;
    font-size:13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-main);
  }
  .tp-option:hover{ border-color: var(--primary); background:var(--bg-page); color:var(--primary); }
  .tp-option.tp-current{ border-color: var(--primary); background: var(--primary); color:#fff; }

  /* ---------- Schedule / Calendar ---------- */
  .cal-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }
  .cal-nav{
    display:flex;
    align-items:center;
    gap: 16px;
  }
  .cal-nav-btn{
    width: 32px; height:32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background:#fff;
    font-size:17px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color: var(--text-main);
  }
  .cal-nav-btn:hover{ background:#f0f0f0; }
  .cal-month-label{
    font-size:18.5px;
    font-weight: 800;
    min-width: 110px;
    text-align:center;
  }
  .cal-quick{ display:flex; gap:8px; }
  .cal-quick-btn{
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background:#fff;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
    color: var(--text-main);
    font-family: inherit;
  }
  .cal-quick-btn:hover{ background:#f0f0f0; }

  .cal-legend{
    display:flex;
    gap: 18px;
    font-size:13.5px;
    color: var(--text-sub);
    margin-bottom: 14px;
  }
  .cal-legend span{ display:flex; align-items:center; gap:6px; }
  .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
  .dot-open{ background:var(--cal-active-bg); }
  .dot-adj{ background:var(--cal-empty-bg); border:1px solid var(--border-strong); }

  /* ---------- 預約客戶訂單：左右分欄（月曆縮小＋訂單卡片）---------- */
  .bookings-split{ display:grid; grid-template-columns: 1fr 1fr; gap:32px; align-items:start; margin-top:18px; }
  .bookings-cal-col{ min-width:0; }
  .bookings-order-col{ min-width:0; }
  .bk-filter-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }

  .bk-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .bk-search-wrap{ position:relative; }
  .bk-search-wrap input{
    padding:9px 34px 9px 12px; border:1px solid var(--border); border-radius:6px;
    font-size:14.5px; font-family:inherit; width:240px; outline:none;
  }
  .bk-search-wrap input:focus{ border-color:var(--primary); }
  .bk-search-wrap svg{ position:absolute; right:11px; top:50%; transform:translateY(-50%); color:#999; pointer-events:none; }

  .bk-pagination-row{
    display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
  }
  .bk-total-count{ font-size:13px; color:var(--text-sub); }
  .bk-pagination{ display:flex; gap:6px; }
  .bk-page-btn{
    min-width:28px; height:28px; padding:0 6px; border-radius:5px; border:1px solid var(--border); background:#fff;
    font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; color:var(--text-main);
  }
  .bk-page-btn:hover{ border-color:var(--primary); color:var(--primary); }
  .bk-page-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; cursor:default; }
  .bk-page-btn:disabled{ opacity:.4; cursor:not-allowed; }

  .booking-card{
    border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:12px; background:#fff;
  }
  .booking-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
  .booking-card-date{ font-size:13px; color:var(--text-sub); font-weight:700; }
  .booking-card-svc{ font-size:15.5px; font-weight:800; margin-top:2px; }
  .booking-card-meta{ font-size:13.5px; color:var(--text-sub); line-height:1.9; }
  .booking-card-meta strong{ color:var(--text-main); font-weight:700; }
  .booking-card-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .booking-card-actions button{
    padding:7px 13px; border-radius:5px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; border:1px solid var(--border); background:#fafafa;
  }
  /* 完成類動作＝高飽和淡綠、取消類動作＝高飽和淡紅，一眼就能分辨正向／負向操作；變更訂單維持原本中性色不動 */
  .bk-btn-complete{ color:#1c8a52; border-color:#a9e0c1; background:#e3f9ec; }
  .bk-btn-complete:hover{ background:#cdf3dc; border-color:#7fd6a3; }
  .bk-btn-cancel{ color:#c23b2e; border-color:#f3b8b0; background:#fdeceb; }
  .bk-btn-cancel:hover{ background:#fbd9d5; border-color:#ef9a8e; }
  .bk-btn-modify{ color:var(--primary); border-color:var(--border-strong); }
  .bk-btn-modify:hover{ background:var(--bg-page); }
  .badge.done{ background:var(--border); color:var(--text-sub); }

  .dot-off{ background:var(--cal-empty-bg); }
  .dot-book{ background:var(--cal-active-bg); }
  /* 「預約客戶訂單」圖例比較特別：這裡的「營業中」點代表無預約，要蓋回灰色 */
  .bookings-cal-col .dot-open{ background:var(--cal-empty-bg); }

  .cal-weekdays{
    display:grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    text-align:center;
    font-size:13px;
    font-weight:700;
    color: var(--text-sub);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .cal-grid{
    display:grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: 6px;
    margin-top: 8px;
  }
  .cal-day{
    aspect-ratio: 1 / 0.85;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 6px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:#fff;
    min-width: 0;
    overflow: hidden;
  }
  .cal-day.empty{ visibility:hidden; cursor:default; }
  .cal-day .d-num{ font-size:14.5px; font-weight:700; }
  .cal-day .d-status{
    font-size:11.5px;
    font-weight:700;
    padding: 2px 6px;
    border-radius: 999px;
    align-self:flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .cal-day.st-open{ border-color:var(--border-strong); }
  .cal-day.st-open .d-status{ background: var(--cal-active-bg); color: var(--cal-active-text); }
  .cal-day.st-adj{ border-color:var(--border-strong); border-style: dashed; }
  .cal-day.st-adj .d-status{ background:#fbefd9; color:#b7791f; border:1px solid #e6c48a; }
  .rule-footer{border-top:1px solid var(--border);margin-top:16px;padding-top:20px;display:flex;flex-direction:column;gap:8px;}
  .rule-footer .btn{width:100%;}
  .nav-group-title{font-size:11px;font-weight:700;color:#7a7d83;letter-spacing:.04em;padding:12px 16px 4px;}
  .about-page, .legal-wrap, main.about, .page-about { max-width: 1400px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
  .cal-day.st-off .d-status{ background:var(--cal-empty-bg); color:var(--cal-empty-text); }
  .cal-day.st-book{ border-color:var(--border-strong); background:var(--bg-page); }
  .cal-day.st-book .d-status{ background:var(--cal-active-bg); color:var(--cal-active-text); }
  /* 「預約客戶訂單」日曆比較特別：st-open 在這裡代表「營業中但無預約」，
     不是真的「有預約」，所以要蓋回灰色，只有 st-book（真的有 X 筆預約）才是綠色 */
  #bkCalGrid .cal-day.st-open .d-status{ background: var(--cal-empty-bg); color: var(--cal-empty-text); }
  .cal-day.selected{ outline: 2px solid var(--primary); outline-offset: -1px; }
  .cal-day.is-today .d-num{ color: var(--primary); text-decoration: underline; }

  .day-detail-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap: 10px;
    margin-bottom: 16px;
  }
  .day-detail-head h3{ margin:0; font-size:17px; font-weight:800; }

  .empty-note{
    padding: 30px 16px;
    text-align:center;
    color: var(--text-sub);
    font-size:14.5px;
    background:#fafafa;
    border:1px dashed var(--border);
    border-radius:6px;
  }

  /* ---------- Footer ---------- */
  footer.site-footer{
    background:#f5f5f5;
    border-top:1px solid var(--border);
    padding: 48px 24px 32px;
    margin-top: 20px;
  }
  .footer-inner{
    max-width:1400px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr;
    gap: 24px;
  }
  .footer-brand h3{ font-size:21px; font-weight:800; margin:0 0 10px; }
  .footer-brand p{ font-size:13.5px; color:var(--text-sub); line-height:1.7; margin:0 0 16px; }
  .footer-socials{ display:flex; gap:10px; }
  .footer-socials a{
    width:32px;height:32px;border-radius:50%;
    border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    color:var(--text-main);
  }
  .footer-col h4{ font-size:15px; font-weight:800; margin:0 0 14px; }
  .footer-col a{ display:block; font-size:13.5px; color:var(--text-sub); margin-bottom:10px; }
  .footer-col a:hover{ color:var(--text-main); }

  /* ---------- Panels ---------- */
  .panel{ display:none; }
  .panel.active{ display:block; }

  /* ---------- Device preview toggle (Demo only) ---------- */
  .device-toggle{
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 999;
    display:flex;
    gap:4px;
    background:#fff;
    border:1px solid var(--border);
    border-radius: 999px;
    padding:4px;
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
  }
  .device-toggle button{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border:none;
    border-radius:999px;
    background:transparent;
    cursor:pointer;
    font-size:13.5px;
    font-weight:700;
    font-family: inherit;
    color:#888;
  }
  .device-toggle button.active{
    background: var(--primary);
    color:#fff;
  }
  .device-toggle button svg{ flex-shrink:0; }

  .device-frame{
    container-type: inline-size;
    container-name: appshell;
    background:#fff;
  }
  body.preview-mobile{
    background:#dde2e6;
  }
  body.preview-mobile .device-frame{
    max-width: 390px;
    margin: 84px auto 40px;
    border: 10px solid #1a1a1a;
    border-radius: 40px;
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    max-height: 844px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    transform: translateZ(0); /* 讓 fixed 定位的 Modal 被限制在手機外框內，而不是整個瀏覽器視窗 */
  }
  body.preview-mobile .device-frame header.site-header{ top:0; }

  /* ---------- Mobile styles (real narrow window OR forced preview) ---------- */
  @media (max-width: 860px){
    .header-inner{ padding: 10px 14px; gap:10px; }
    .logo{ font-size:0; gap:0; }
    .logo .logo-mark{ width:30px;height:30px; font-size:17px; }
    .header-search{ order: 3; flex-basis: 100%; max-width:none; }
    .header-search input{ padding: 8px 36px 8px 12px; }
    .header-actions{ gap: 10px; }
    .pill-btn{ padding: 7px 12px; font-size:13px; }
    .header-inner{ flex-wrap: wrap; }

    .page-wrap{ flex-direction: column; padding: 0 0 40px; gap:0; min-width:0; }
    .sidebar{ width:100%; }
    .store-card{ margin: 14px 14px 12px; border-radius:8px; }
    .side-nav{ display:none; } /* replaced by mobile-tabs */

    .main-content{ min-width: 0; width: 100%; }

    .mobile-tabs{
      display:flex;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      gap: 8px;
      padding: 0 14px 14px;
      scrollbar-width: none;
      min-width: 0;
      max-width: 100%;
    }
    .mobile-tabs::-webkit-scrollbar{ display:none; }
    .mobile-tabs button{
      flex-shrink:0;
      padding: 9px 18px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background:#fff;
      font-size:14.5px;
      font-weight:600;
      font-family: inherit;
      color: var(--text-main);
      cursor:pointer;
      white-space:nowrap;
    }
    .mobile-tabs button.active{
      background: var(--primary);
      border-color: var(--primary);
      color:#fff;
    }
    .mobile-tabs button.nav-highlight{
      display:inline-flex; align-items:center; gap:6px;
      border-color: var(--primary); background:var(--bg-page); color:var(--primary);
    }
    .mobile-tabs button.nav-highlight.active{ background:var(--primary); color:#fff; }
    .mobile-tabs .nav-icon-badge{ width:18px; height:18px; margin-right:0; font-size:11.5px; }
    .mobile-tabs .nav-badge{ margin-left:2px; }

    .platform-nav{ padding:10px 14px 14px; gap:8px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
    .platform-nav button{ flex-shrink:0; padding:8px 14px; font-size:13px; }
    .platform-main{ padding:20px 14px 40px; }
    .pf-welcome-banner{ padding:22px 20px; }
    .pf-welcome-banner h1{ font-size:20px; }
    .pf-stat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
    .pf-stat-card{ padding:14px 16px; gap:10px; }
    .pf-stat-icon{ width:38px; height:38px; font-size:17px; }
    .pf-stat-value{ font-size:20px; }
    .pf-dashboard-cols{ grid-template-columns:1fr; }
    .pf-settings-row{ grid-template-columns:1fr; gap:16px; }
    .pf-settle-controls{ grid-template-columns:1fr; gap:12px; }
    .pf-settle-stat-grid{ grid-template-columns:1fr 1fr; gap:10px; }
    .pf-fee-split-layout{ grid-template-columns:1fr; gap:16px; }
    .pf-fee-hero{ padding:20px 18px; }
    .pf-fee-hero-amount{ font-size:27px; }
    .pf-fee-split-legend{ gap:14px; }

    /* 購物車項目在手機版改成兩行排列，避免橫向塞不下、移除按鈕被擠出畫面 */
    .cart-item-row{ flex-wrap:wrap; position:relative; padding-right:26px; }
    .cart-item-thumb{ width:52px; height:52px; }
    .cart-item-info{ min-width:0; flex:1 1 auto; }
    .cart-item-qty-stepper{ order:3; margin-left:66px; }
    .cart-item-subtotal{ order:4; width:auto; margin-left:auto; }
    .cart-item-remove{ position:absolute; top:10px; right:0; }
    .notif-dropdown{ width:270px; right:-70px; }
    .staff-reminder-toast{ right:12px; bottom:12px; left:12px; width:auto; }
    .pf-page-head{ flex-direction:column; align-items:stretch; }
    .pf-search-wrap input{ width:100%; }
    .pf-module-head{ flex-wrap:wrap; }
    .pf-module-actions{ margin-left:0; width:100%; justify-content:space-between; margin-top:10px; }

    .main-content{ padding: 0 14px; }
    .content-card{ padding: 20px 16px; border-radius:8px; }
    .content-head{ flex-direction:column; gap:6px; }
    .content-head h1{ font-size:21px; }
    .content-head .head-side{ padding-top:0; }

    .form-grid{ grid-template-columns: 1fr; gap:16px; }

    .dtable-head{ display:none; }
    .dtable-row{
      grid-template-columns: 1fr !important;
      gap: 6px;
      padding: 14px;
    }
    .dtable-row > div{ display:flex; justify-content:space-between; gap:10px; font-size:14.5px; }
    .dtable-row > div::before{
      content: attr(data-label);
      font-weight:700;
      color: var(--text-sub);
      font-size:13px;
      flex-shrink:0;
    }
    .dtable-row .row-actions{ justify-content:flex-end; flex-wrap:wrap; }
    .dtable-row .row-actions::before{ content:none; }

    .quickset-row{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px; }
    .qs-day{ width:auto; }
    .radio-group{ width:100%; }
    .radio-pill{ flex:1; justify-content:center; }
    .qs-time{ width:100%; }
    .qs-time .wt-time{ flex:1; }

    .day-quick-row{ gap:8px; }
    .dq-btn{ flex:1 1 auto; min-width:0; }
    .wt-label-inline{ flex:1 1 100%; margin-left:0; }
    .day-quick-row .wt-time{ flex:1; min-width:0; }

    .avail-split-layout{ grid-template-columns: 1fr; gap:8px; }
    .payment-methods-grid{ grid-template-columns: 1fr; gap:16px; }

    .modal-overlay{ padding:0; align-items:stretch; }
    .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
    .pc-body{ padding:9px 9px 2px; }
    .pc-name{ font-size:13.5px; }
    .pc-price{ font-size:15px; }
    .pc-footer{ padding:8px 9px 9px; flex-direction:column; gap:6px; }
    .modal-card{ max-width:none; max-height:none; height:100%; border-radius:0; }
    .modal-header{ padding:16px; }
    .modal-body{ padding:16px; }
    .modal-footer{ padding:14px 16px; flex-direction:column-reverse; }
    .url-row{ flex-direction:column; }
    .url-row button{ width:100%; }
    .success-card{ max-width:none; width:100%; margin:auto 16px; border-radius:10px; height:auto; }

    .cal-toolbar{ justify-content:center; text-align:center; }
    .cal-nav{ gap:10px; }
    .cal-legend{ flex-wrap:wrap; gap:10px 16px; justify-content:center; }
    .cal-weekdays{ font-size:11.5px; }
    .cal-grid{ gap:4px; }
    .bookings-split{ grid-template-columns: 1fr; gap:22px; }
    .bookings-cal-col{ max-width:320px; margin:0 auto; }
    .bk-filter-row{ flex-direction:column; align-items:stretch; gap:8px; }

    .cat-parent-row, .cat-sub-row{
      grid-template-columns: 1fr; gap:6px; padding:12px 14px;
    }

    .cal-day{
      padding:5px 2px 6px;
      border-radius:5px;
      align-items:center;
      gap: 3px;
    }
    .cal-day .d-num{ font-size:13px; }
    /* 手機格子太小，狀態改用小圓點呈現，不顯示文字 */
    .cal-day .d-status{
      font-size:0 !important;
      line-height:0 !important;
      padding:0 !important;
      width:7px !important;
      height:7px !important;
      min-width:7px !important;
      min-height:7px !important;
      flex:none !important;
      border-radius:50% !important;
      align-self:center !important;
      white-space: normal !important;
      overflow:visible !important;
    }
    .cal-day.st-open .d-status{ background:var(--cal-active-bg); }
    .cal-day.st-adj .d-status{ background:var(--cal-empty-bg); }
    .cal-day.st-off .d-status{ background:var(--cal-empty-bg); }
    .cal-day.st-book .d-status{ background:var(--cal-active-bg); }
    #bkCalGrid .cal-day.st-open .d-status{ background:var(--cal-empty-bg); }
    .day-detail-head{ flex-direction:column; align-items:flex-start; }

    .btn-row{ flex-direction:column-reverse; }
    .btn.primary{ width:100%; }

    .footer-inner{ grid-template-columns: 1fr 1fr; gap:28px 20px; }
    .footer-brand{ grid-column: 1 / -1; }
  }


  /* ================================================================
     平板專屬斷點（約 601px～860px，例如 iPad Mini／Air 直向）
     ================================================================
     前面兩個 860px 斷點是給「真正的手機」用的，但因為斷點沒有下限，
     連平板寬度也一起套用了手機版的 2 欄限制，導致畫面明明有空間卻只
     擠出 2 欄、留白過大看起來很擁擠。這裡疊加一層更精確的平板規則，
     放在樣式表最後面，靠 CSS 層疊順序覆蓋掉前面過度收窄的手機版規則。
     ================================================================ */
  @media (min-width: 601px) and (max-width: 860px){
    .sf-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
    .sf-card-body{ padding:12px 12px 14px; }
    .sf-card-name{ font-size:14px; }
    .sf-card-price{ font-size:16px; }
    .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }

    .pf-stat-grid{ grid-template-columns: repeat(4, 1fr); gap:14px; }
    .pf-settle-stat-grid{ grid-template-columns: repeat(4, 1fr); gap:14px; }
    .pf-fee-stat-grid{ grid-template-columns: repeat(3, 1fr); gap:14px; }
    .pf-dashboard-cols{ grid-template-columns: 1.4fr 1fr; }
    .pf-settle-controls{ grid-template-columns: 1fr 1fr; }
    .pf-settings-row{ grid-template-columns: 1fr 1fr; }

    .header-inner{ padding: 14px 20px; gap:16px; }
    .logo{ font-size:inherit; gap:8px; }
    .logo .logo-mark{ width:34px; height:34px; font-size:18px; }
    .header-search{ order:0; flex-basis:auto; max-width:360px; }

    .register-layout{ grid-template-columns: 1fr; }
    .checkout-layout{ grid-template-columns: 1.5fr 1fr; }
    .pd-layout{ grid-template-columns: 1fr 1fr; gap:32px; }
    .svc-booking-layout{ grid-template-columns: 1fr 1fr; gap:28px; }
    .bookings-split{ grid-template-columns: 1fr 1fr; gap:24px; }
    .avail-split-layout{ grid-template-columns: 1fr 1fr; gap:28px; }

    .footer-inner{ grid-template-columns: repeat(3, 1fr); gap:24px 20px; }
    .footer-brand{ grid-column: 1 / -1; }
  }

/* ---------- App view switch（前台／賣家後台）---------- */
.app-view{ display:none; }
.app-view.active{ display:block; }


/* multi-page site: do not hide .page / .app-view */
.page, .app-view { display: block; }
.device-toggle, .device-frame { all: unset; display: contents; }