/* ── 背景圖 ── */
/* background-image 等一定要 !important：店家手寫的 CSS 排在這之後，
   裡面常有 body{background:var(--bg)} 這種簡寫，會把整組背景（含圖）重設掉。
   加了 !important，簡寫就蓋不掉圖，但顏色、字體那些照樣由手寫 CSS 決定。 */
body {
  min-height: 100vh;
  background-image:
    linear-gradient(var(--veil-top, rgba(255,255,255,.55)), var(--veil-bottom, rgba(255,255,255,.75))),
    url("/uploads/1788628040348-bdacc6fd.jpg") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center top, center top !important;
  background-size: cover, cover !important;
  background-attachment: scroll, scroll !important;   /* 跟著捲動，不是 fixed */
}
/* 只有「卡片」加半透明底，**不要碰版面容器**。
   .sheet 是整頁的內容外框（max-width 480px 那個），給它上底色等於
   把整條內容欄都糊成一塊，背景圖就完全看不到了 —— 這是最容易踩的坑。
   同理 .plans 是清單容器，真正該上底的是裡面的 .plan。

   深色版型的店在自己的 CSS 覆蓋這幾個變數就好，不用改程式：
     :root{ --veil-top:rgba(6,10,32,.45); --veil-bottom:rgba(6,10,32,.72);
            --panel:rgba(21,27,71,.72); --panel-bar:rgba(11,16,51,.82); } */
.block, .card, .plan, .result-card, .bank-box, .form-card {
  background-color: var(--panel, rgba(255,255,255,.85));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* 頁首、頁尾、底部結帳列：透一點，看得到後面的圖 */
.nav, .footer, .checkout {
  background-color: var(--panel-bar, var(--panel, rgba(255,255,255,.78)));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 版面容器保持透明，背景圖才透得出來 */
.sheet, .plans, .result-main, .wrap {
  background-color: transparent;
}

/* ── 手寫的自訂樣式 ── */

/* 安啾拉🐱 mengmeng —— 淡紫高級版
   原本是粉紅奶油系（#FFF4F6 底 + 桃粉），整組換成淡紫。
   走向不是「更甜」而是「更貴」：留白拉大、線條收細、
   陰影改成低透明度的紫調長影，字重只用 900 與 400 兩級。
   2026-09-06 重新設計。 */

:root{
  /* 底：淡紫。這個值同時是 theme.js 判斷背景圖遮罩深淺的依據
     （亮度 0.88 → 自動走淺色紗），改深色的話遮罩邏輯也會跟著變。 */
  --bg:#E8DFF5;
  --surface:#FFFFFF;

  /* 字：深紫。純黑配淡紫會顯得髒，紫調的深色才乾淨 */
  --ink:#3B2657;
  --ink-2:#6B5387;
  --ink-3:#9385AD;
  --ink-4:#A99EBE;

  /* 線：極淡的紫，細就好。原本 3px 粉框太可愛，這版收成 1.5px */
  --line:#DDD0EF;
  --line-2:#EFE8F8;

  /* 圓角比原本收一點：30px 太糖果感，22px 才有質感 */
  --r:22px;
  --r-sm:16px;

  /* 深紫色階 */
  --o-700:#57307F;
  --o-600:#6B3FA0;
  --o-500:#7B52AB;
  --o-400:#9B79C4;
  --o-300:#BCA3DA;
  --o-200:#DDCFEE;
  --o-100:#EDE5F7;
  --o-50:#F6F2FB;

  /* 統一的紫調陰影。散得開、透明度低，這是「高級」的關鍵，
     比實心深灰陰影乾淨很多 */
  --sh-1:0 2px 10px rgba(75,45,120,.06);
  --sh-2:0 10px 30px -8px rgba(75,45,120,.16);
  --sh-3:0 20px 46px -14px rgba(75,45,120,.22);
}

/* ── 字體：思源黑體。標題 900、內文 400，中間字重一律不用 ──
   只用兩級字重是刻意的：字重一多就雜，兩級對比反而顯得有規矩。 */
body{
  background:var(--bg);
  background-image:
    radial-gradient(820px 460px at 78% -10%, #F0E8FA 0%, transparent 62%),
    radial-gradient(600px 380px at 4% 84%, #E4EEFB 0%, transparent 60%);
  color:var(--ink);
  /* 最後三個是彩色 emoji 字型。思源黑體沒有 emoji 字形，
     不明寫的話某些 Android／舊版瀏覽器會畫成空心方塊。 */
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",
    "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
body,p,li,dd,dt,label,.tagline,.plan-feats li,
.disclaimer,.copyright,.fineprint,.fld > span,.plan-desc{
  font-weight:400;
}

/* ── 背景的貓掌：淡紫、再淡一點 ──
   之後蓋上背景圖時這層會跟圖疊在一起，所以透明度壓低才不會亂 */
.paws{position:fixed;inset:0;pointer-events:none;z-index:0}
.paw{position:absolute;font-size:40px;opacity:.09;transform:rotate(-18deg);
  filter:hue-rotate(255deg) saturate(.5)}
.p1{top:12%;left:6%}
.p2{top:34%;right:8%;transform:rotate(22deg);font-size:30px}
.p3{bottom:20%;left:10%;transform:rotate(10deg);font-size:34px}
.p4{bottom:8%;right:14%;transform:rotate(-28deg);font-size:26px;opacity:.07}
.sheet{position:relative;z-index:1}

/* ── 品牌區 ── */
.brand{padding-top:36px;padding-bottom:10px}
/* 頭像上的耳朵改紫 */
.ears{position:relative;height:0}
.ears i{position:absolute;top:6px;width:26px;height:26px;border-radius:50% 50% 0 50%;
  background:var(--o-400);box-shadow:0 3px 12px rgba(107,63,160,.22)}
.ears i:first-child{left:calc(50% - 34px);transform:rotate(-28deg)}
.ears i:last-child{left:calc(50% + 8px);transform:rotate(62deg)}

.avatar{border-radius:50%;
  background:linear-gradient(160deg,var(--o-300),var(--o-600));
  box-shadow:0 0 0 4px rgba(255,255,255,.7), var(--sh-3);
  position:relative;z-index:1}

/* 店名不能用「漸層裁字」（background-clip:text + color:transparent）。
   那招對純文字很漂亮，但店名裡有彩色 emoji（安啾拉🐱 的 U+1F431），
   emoji 會被當成一般字形一起裁掉，整顆變成一塊實心紫色方塊 ——
   看起來就像字體缺字。改用實心深紫，emoji 才會用系統的彩色字型畫出來。 */
.brand h1{
  font-weight:900;font-size:clamp(30px,8vw,40px);letter-spacing:.05em;line-height:1.25;
  color:var(--o-700);
  background:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  text-shadow:0 2px 14px rgba(107,63,160,.14);
}

/* 標語有三行（官方 Line／IG／招呼語），後台存的是含換行的字串。
   simple.js 用 textContent 塞進來，預設換行會被吃掉 ——
   pre-line 讓 \n 留著，又不會把多餘空白也一起保留。 */
.tagline{
  white-space:pre-line;
  color:var(--ink-2);
  font-size:13.5px;line-height:2;letter-spacing:.02em;
  margin-top:12px;
}

/* ── 區塊標題 ──
   原本每個標題後面自動加 🐾，新標題本身已經有貓和愛心了，再加就雜，拿掉。
   改成標題下一條由深紫淡出的細線，安靜但有層次。 */
.block{margin-bottom:34px}
.block-head{
  padding-bottom:11px;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,var(--o-400),rgba(155,121,196,.28),rgba(155,121,196,.04)) 1;
}
.block-head h2{font-weight:900;font-size:17.5px;letter-spacing:.04em;color:var(--ink)}
.block-head h2::after{content:none}
.more-link{color:var(--o-600);font-weight:900;font-size:12.5px;letter-spacing:.04em}

/* ── 方案卡：白底 + 淡紫細框 ── */
.plan{
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.plan:hover{border-color:var(--o-300);transform:translateY(-3px);box-shadow:var(--sh-2)}
.plan.on{
  border-color:var(--o-500);
  background:linear-gradient(180deg,var(--o-50),#fff 62%);
  box-shadow:0 0 0 1px var(--o-400), var(--sh-3);
}
.plan-name{font-weight:900;letter-spacing:.02em;color:var(--ink)}
.plan-price b{font-weight:900;color:var(--o-600);letter-spacing:-.01em}
.plan-tag{
  background:linear-gradient(135deg,var(--o-400),var(--o-600));
  color:#fff;border-radius:999px;font-weight:900;font-size:11px;letter-spacing:.06em;
  box-shadow:0 4px 12px rgba(107,63,160,.26);
}
.plan-feats li::before{content:"🐾";font-size:10px}
.tick{border-radius:50%;border-width:2px;border-color:var(--o-400)}

/* ── 付款方式與表單 ── */
.pay{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .2s, box-shadow .2s}
.pay.on{border-color:var(--o-500);background:var(--o-50);box-shadow:0 0 0 1px var(--o-300)}
.fld > span{font-weight:900;color:var(--ink-2);font-size:12px;letter-spacing:.06em}
.fld input,.fld textarea,.fld select{
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-weight:400;
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4)}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  border-color:var(--o-400);box-shadow:0 0 0 4px var(--o-100)}

/* ── 底部結帳列與主按鈕 ── */
.checkout{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0;
  box-shadow:0 -10px 34px -16px rgba(75,45,120,.3);
}
.total b{font-weight:900;font-size:27px;color:var(--o-600);letter-spacing:-.01em}
.pay-btn{
  background:linear-gradient(135deg,var(--o-400) 0%,var(--o-600) 55%,var(--o-700) 100%);
  color:#fff;border:none;border-radius:999px;
  font-weight:900;font-size:17px;letter-spacing:.1em;
  box-shadow:0 10px 28px rgba(107,63,160,.34), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.pay-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 14px 36px rgba(107,63,160,.4), inset 0 1px 0 rgba(255,255,255,.34)}
.pay-btn:active{transform:translateY(0)}
.pay-btn:disabled{background:var(--o-200);color:#fff;box-shadow:none;filter:none}

/* ── 其他零件 ── */
.line-box{border-radius:var(--r-sm);border-color:var(--line);background:var(--o-50)}
.toast{border-radius:999px;font-weight:900;background:var(--o-700);color:#fff}
.sk{background:linear-gradient(90deg,var(--o-100),#fff,var(--o-100))}
.disclaimer,.copyright,.fineprint{color:var(--ink-3);line-height:1.85}
.alert-info{background:var(--o-50);border-color:var(--o-200);color:var(--o-700)}
.footer{background:transparent}

/* ── 訂單頁／付款頁：同一套淡紫，結帳走過去不換皮 ── */
.result-page{background:var(--bg)}
.result-card,.bank-box,.form-card,.card{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-1);color:var(--ink);
}
.bank-box{background:var(--o-50)}
.bank-box h4{color:var(--o-600)}
.result-card h1{font-weight:900;color:var(--ink)}
.kv-row{border-bottom:1px solid var(--line-2)}
.kv-row:last-child{border-bottom:none}
.kv-row dt{color:var(--ink-3)}
.kv-row dd{color:var(--ink)}
.kv-row.total dd{color:var(--o-600);font-weight:900}
.nav{background:rgba(255,255,255,.88);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo-mark{background:linear-gradient(160deg,var(--o-300),var(--o-600));color:#fff;
  box-shadow:0 6px 18px rgba(107,63,160,.26)}
.btn-primary{background:linear-gradient(135deg,var(--o-400),var(--o-600) 55%,var(--o-700));
  color:#fff;font-weight:900;border-radius:999px;border:none;
  box-shadow:0 8px 22px rgba(107,63,160,.3)}
.btn-ghost{background:var(--o-50);color:var(--o-700);border:1.5px solid var(--line);border-radius:999px}
.copy-btn{background:var(--o-100);color:var(--o-700);border:1.5px solid var(--o-200);border-radius:999px}
.badge-status{border-radius:999px}

/* ══════════════════════════════════════════════════════════
   背景圖模式
   老闆從後台上傳「整頁背景圖」（淡紫色那張）之後，
   theme.js 會自動判斷這間店是淺色版型、鋪一層白紗。
   下面把紗與卡片換成淡紫調 —— 中性白紗會把紫色洗掉，
   帶一點紫的紗才會跟圖融在一起。

   這一段現在就生效（變數沒被用到不影響任何東西），
   圖一上傳就是對的樣子，不用再回來改 CSS。
   ══════════════════════════════════════════════════════════ */

:root{
  /* 上面幾乎不蓋，讓圖的主角看得到；下面壓深一點，結帳區的字才穩 */
  --veil-top:rgba(250,247,255,.34);
  --veil-bottom:rgba(232,223,245,.80);
  /* 卡片：白色半透明。淡紫圖配白玻璃最乾淨 */
  --panel:rgba(255,255,255,.82);
  --panel-bar:rgba(255,255,255,.88);

  /* 卡片柔邊：極淡的紫內圈線 + 散開的長影，取代硬框 */
  --soft-edge:0 0 0 1px rgba(155,121,196,.14), 0 22px 46px -20px rgba(75,45,120,.28);
}

/* 圖還沒載入時由 html 頂著，不會閃白 */
html{background:#E8DFF5}

/* 版面容器一律透明。有底色的只能是卡片本身 ——
   容器一有底，整條內容欄就把背景圖蓋掉了。 */
.sheet,.block,.plans,.wrap,.result-main,.footer{
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 卡片改半透明白玻璃 + 淡紫邊 */
.plan,.result-card,.bank-box,.form-card,.card,.pay{
  background-color:rgba(255,255,255,.82);
  border-color:rgba(155,121,196,.22);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:var(--soft-edge);
}
.plan.on{
  background:linear-gradient(180deg,rgba(237,229,247,.9),rgba(255,255,255,.86)) !important;
  border-color:var(--o-500);
  box-shadow:0 0 0 1px var(--o-400), 0 22px 48px -18px rgba(75,45,120,.34);
}
.pay.on{background-color:rgba(237,229,247,.9);border-color:var(--o-500)}

/* 免責聲明：基礎樣式寫死 #fff／rgba(255,255,255,.7)，
   在圖上會是一塊突兀的白卡，改成同一套白玻璃並收掉硬邊。 */
.disclaimer{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(155,121,196,.16) !important;
  border-left:2px solid transparent !important;
  border-image:linear-gradient(180deg,var(--o-400),rgba(155,121,196,.18)) 1 !important;
  border-radius:var(--r-sm);
  color:var(--ink-3) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--soft-edge);
}

/* 提示條（含「目前沒有開放中的方案」）也走白玻璃 */
.alert{
  background:rgba(255,255,255,.8) !important;
  border:1px solid rgba(155,121,196,.2) !important;
  border-radius:var(--r-sm);
  color:var(--ink-2) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--soft-edge);
}
.alert-info{color:var(--o-700) !important}
.alert-error{background:rgba(255,242,244,.86) !important;border-color:rgba(220,140,160,.34) !important;color:#9B2C43 !important}
.alert-warn{background:rgba(255,251,238,.86) !important;border-color:rgba(214,180,90,.34) !important;color:#7A5A15 !important}

/* 結帳列與頁首：透一點，捲動時看得到圖在後面走 */
.checkout{background:rgba(255,255,255,.78);backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15)}
.nav{background:rgba(255,255,255,.8);backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.15)}
.line-box{background:rgba(255,255,255,.74);border-color:rgba(155,121,196,.2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sk{background:linear-gradient(90deg,rgba(237,229,247,.6),rgba(255,255,255,.75),rgba(237,229,247,.6))}