/* ── 背景圖 ── */
/* 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/1788612602019-79243371.png") !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;
}

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

/* 渣女新知識 badgirl —— 玫瑰夜色
   暖粉 + 玫瑰金 + 夜晚閨房感。深玫瑰底（不是純黑），半透明粉卡片配玫瑰金細邊，
   玫瑰粉漸層按鈕，蕾絲質感的細紋理。
   原本是近黑底 + 桃紅 + 襯線斜體，整組換掉。
   2026-09-05 重新設計。 */

:root{
  /* 底：深玫瑰紫，帶紅調的暗色 —— 純黑會冷，這個才有夜晚閨房的溫度 */
  --bg:#2A1520;
  --surface:#3A1E2C;

  /* 字：白偏粉 → 越次要越粉，整體才不會出現冷灰 */
  --ink:#FDF2F6;
  --ink-2:#E8C9D6;
  --ink-3:#B694A4;
  --ink-4:#8A6B79;

  /* 線：暗玫瑰 */
  --line:#4A2A38;
  --line-2:#3A2029;

  --r:18px;
  --r-sm:12px;

  /* 玫瑰粉色階 */
  --o-500:#E8A0BF;
  --o-600:#D4869C;
  --o-400:#F0B8CE;
  --o-300:#F5C6D0;
  --o-200:#4A2836;
  --o-100:#3A1F2A;
  --o-50:#2F1823;

  /* 玫瑰金 —— 分隔線與細節用，比粉色再暖一點 */
  --rose-gold:#E3B4A4;
  --rose-gold-2:#C08D80;
}

html{background:#241220}
body{
  min-height:100vh;
  /* 底色本身帶一點由上而下的層次，像房間裡的光 */
  background:linear-gradient(180deg,#311824 0%,#2A1520 42%,#241220 100%);
  color:var(--ink);
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* 內文一律 Regular，不讓底層樣式偷偷加粗 */
body,p,li,dd,dt,label,.tagline,.plan-feats li,
.disclaimer,.copyright,.fineprint,.fld > span{
  font-weight:400;
}

/* ── 氛圍層 ──
   兩團暖粉光暈 + 一層極淡的蕾絲點紋。
   蕾絲用兩組錯開的圓點做出網狀感，opacity 壓很低，
   是「靠近才看得到」的質感，不是花俏的圖案。 */
.velvet{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 400px at 50% -8%, rgba(232,160,191,.22), transparent 64%),
    radial-gradient(520px 340px at 88% 68%, rgba(227,180,164,.14), transparent 62%),
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px) 0 0/16px 16px,
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.4px) 8px 8px/16px 16px;
}

/* 霓虹唇印：光暈改成玫瑰粉，閃爍放慢，比原本收斂 */
.neon{
  position:fixed;top:11%;right:7%;font-size:56px;opacity:.16;
  pointer-events:none;z-index:0;
  filter:drop-shadow(0 0 26px rgba(232,160,191,.75));
  animation:flick 7s ease-in-out infinite;
}
@keyframes flick{0%,100%{opacity:.16}47%{opacity:.16}50%{opacity:.34}53%{opacity:.16}}
@media (prefers-reduced-motion:reduce){.neon{animation:none}}
.sheet{position:relative;z-index:1}

/* ── 品牌區 ── */
.brand{padding-top:34px;padding-bottom:8px}

/* 唇線改成玫瑰金漸層，兩端淡出 */
.lipline{
  width:64px;height:2px;margin:0 auto 16px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--rose-gold),var(--o-500),var(--rose-gold),transparent);
  box-shadow:0 0 18px rgba(232,160,191,.5);
}
.brand h1{
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:clamp(32px,8.5vw,44px);
  font-weight:900;letter-spacing:.06em;line-height:1.2;font-style:normal;
  background:linear-gradient(180deg,#FFF4F8 0%,var(--o-300) 45%,var(--o-600) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{
  font-family:"Noto Sans TC",sans-serif;font-style:normal;
  color:var(--ink-2);letter-spacing:.16em;font-size:12.5px;margin-top:10px;
}
.avatar{
  background:radial-gradient(circle at 34% 28%, var(--o-300), var(--o-600));
  box-shadow:0 0 0 1px rgba(232,160,191,.4), 0 0 40px rgba(232,160,191,.3);
}

/* ── 區塊標題：玫瑰金漸層分隔線 ── */
.block{margin-bottom:32px}
.block-head{
  padding-bottom:10px;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,var(--rose-gold),rgba(232,160,191,.4),rgba(232,160,191,.06)) 1;
}
.block-head h2{
  font-family:"Noto Sans TC",sans-serif;
  font-weight:900;font-size:18px;letter-spacing:.06em;color:var(--ink);
}
.more-link{
  font-style:normal;font-weight:500;letter-spacing:.06em;font-size:12.5px;color:var(--o-400);
}

/* ── 方案卡：半透明深粉 + 玫瑰金細邊 ── */
.plan{
  background:linear-gradient(180deg,rgba(232,160,191,.10),rgba(58,30,44,.55));
  border:1px solid rgba(227,180,164,.22);
  border-radius:var(--r);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(20,8,14,.4);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.plan:hover{
  border-color:rgba(232,160,191,.5);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(20,8,14,.5), 0 0 24px rgba(232,160,191,.1);
}
.plan.on{
  border-color:var(--o-500);
  background:linear-gradient(180deg,rgba(232,160,191,.2),rgba(58,30,44,.6));
  box-shadow:0 0 0 1px rgba(232,160,191,.45), 0 14px 38px rgba(232,160,191,.2);
}
.plan-name{
  font-family:"Noto Sans TC",sans-serif;
  font-weight:900;letter-spacing:.03em;color:var(--ink);
}
.plan-price b{
  font-family:"Noto Sans TC",sans-serif;
  font-weight:700;font-size:27px;letter-spacing:-.01em;
  background:linear-gradient(180deg,#FFF4F8,var(--o-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plan-tag{
  background:linear-gradient(135deg,var(--o-300),var(--o-600));
  color:#2A1520;font-weight:700;font-size:11px;
  border-radius:999px;letter-spacing:.06em;padding:4px 12px;
}
.plan-feats li::before{content:"♡";color:var(--o-500);font-size:11px}
.tick{border-radius:50%;border-width:2px;border-color:var(--o-500)}

/* ── 付款方式與表單 ── */
.pay{
  background:rgba(232,160,191,.07);
  border:1px solid rgba(227,180,164,.2);
  border-radius:var(--r-sm);
  transition:border-color .2s, box-shadow .2s;
}
.pay.on{
  border-color:var(--o-500);
  background:rgba(232,160,191,.16);
  box-shadow:0 0 0 1px rgba(232,160,191,.4);
}
.fld > span{
  color:var(--o-300);letter-spacing:.1em;font-size:11.5px;font-weight:500;
}
.fld input,.fld textarea,.fld select{
  background:rgba(20,8,14,.45);
  border:1px solid rgba(227,180,164,.2);
  border-radius:var(--r-sm);
  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-500);
  box-shadow:0 0 0 3px rgba(232,160,191,.2);
}

/* ── 底部結帳列：玫瑰金細線 ── */
.checkout{
  background:rgba(36,18,32,.93);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(232,160,191,.1),var(--rose-gold),rgba(232,160,191,.1)) 1;
}
.total b{
  font-family:"Noto Sans TC",sans-serif;
  font-weight:700;font-size:27px;letter-spacing:-.01em;
  background:linear-gradient(180deg,#FFF4F8,var(--o-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* 主要行動按鈕：玫瑰粉漸層、圓潤、柔和粉光 */
.pay-btn{
  background:linear-gradient(135deg,var(--o-300) 0%,var(--o-500) 45%,var(--o-600) 100%);
  color:#2A1520;
  font-family:"Noto Sans TC",sans-serif;
  font-size:16.5px;font-weight:900;letter-spacing:.12em;
  border-radius:999px;border:none;
  box-shadow:0 10px 30px rgba(232,160,191,.34), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.pay-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(232,160,191,.42), inset 0 1px 0 rgba(255,255,255,.5);
  filter:brightness(1.04);
}
.pay-btn:active{transform:translateY(0)}
.pay-btn:disabled{background:#4A2836;color:var(--ink-4);box-shadow:none;filter:none}

/* ── 其他零件 ── */
.line-box{background:rgba(232,160,191,.08);border:1px solid rgba(227,180,164,.2);border-radius:var(--r-sm)}
.sk{background:linear-gradient(90deg,#331A26,#452433,#331A26)}
.toast{
  background:#3A1E2C;color:var(--ink);
  border:1px solid rgba(227,180,164,.28);border-radius:999px;font-weight:500;
  box-shadow:0 10px 30px rgba(20,8,14,.6);
}
.disclaimer,.copyright,.fineprint{color:var(--ink-4);line-height:1.8}

/* footer：上緣一條玫瑰金線收尾 */
.footer{
  background:transparent;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(232,160,191,.06),var(--rose-gold),rgba(232,160,191,.06)) 1;
  margin-top:10px;
}
.footer .copyright{color:var(--ink-4)}

/* ── 訂單頁／付款頁 ──
   同一套玫瑰夜色，客人結帳走過去不換皮。 */
.result-page{background:linear-gradient(180deg,#311824 0%,#2A1520 45%,#241220 100%)}
.result-card,.bank-box{
  background:linear-gradient(180deg,rgba(232,160,191,.09),rgba(58,30,44,.6));
  border:1px solid rgba(227,180,164,.22);
  border-radius:var(--r);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 26px rgba(20,8,14,.45);
  color:var(--ink);
}
.bank-box{background:rgba(232,160,191,.1)}
.bank-box h4{color:var(--o-300)}
.result-card h1{font-family:"Noto Sans TC",sans-serif;font-weight:900;color:var(--ink)}
.result-top p{color:var(--ink-2)}
.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{
  background:linear-gradient(180deg,#FFF4F8,var(--o-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.copy-row b{color:var(--ink)}
.copy-btn{background:rgba(232,160,191,.16);color:var(--o-300);border:1px solid rgba(227,180,164,.28);border-radius:999px}
.nav{background:rgba(36,18,32,.92);border-bottom:1px solid var(--line)}
.logo-mark{
  background:radial-gradient(circle at 34% 28%, var(--o-300), var(--o-600));
  color:#2A1520;
  box-shadow:0 6px 20px rgba(232,160,191,.3);
}
.btn-primary{
  background:linear-gradient(135deg,var(--o-300),var(--o-500) 45%,var(--o-600));
  color:#2A1520;font-weight:900;border-radius:999px;border:none;
  box-shadow:0 8px 26px rgba(232,160,191,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-ghost{
  background:rgba(232,160,191,.08);color:var(--ink-2);
  border:1px solid rgba(227,180,164,.22);border-radius:999px;
}
.badge-status{border-radius:999px}
.result-icon{border:1px solid rgba(227,180,164,.28)}

/* ══════════════════════════════════════════════════════════════
   背景圖融合層　2026-09-05

   這間店有整頁背景圖。theme.js 會自動判斷深色版型、鋪一層深紗，
   但它有兩個地方跟這套玫瑰夜色不合：

   1. 紗與卡片用的是中性灰 rgba(20,20,20,…)。灰配暖粉會發濁，
      看起來就是「一塊灰方塊壓在粉紫色的圖上」。
   2. 它把 .block 也上了底色。.block 是「今夜的課」這種區段容器，
      不是卡片 —— 給它上底等於在圖上蓋一塊大板子，
      這就是中間那塊突兀深色方塊的來源。

   下面做三件事：把紗換成深玫瑰、容器一律透明、
   卡片改成半透明加模糊，邊界用極淡的線＋外暈化開，不留硬邊。
   ══════════════════════════════════════════════════════════════ */

/* 紗與面板改成玫瑰色調 —— theme.js 產生的規則是 var(--panel, 灰)，
   在這裡把變數定義出來，它就會自動改吃這組值。 */
:root{
  --veil-top:rgba(49,24,36,.30);
  --veil-bottom:rgba(26,11,20,.70);
  --panel:rgba(58,30,44,.42);
  --panel-bar:rgba(36,18,32,.62);

  /* 卡片共用的柔邊：一條幾乎看不見的內圈線 + 往外散開的深色暈，
     取代硬邊框，讓卡片邊緣「化」進背景而不是切一刀。 */
  --soft-edge:0 0 0 1px rgba(227,180,164,.12), 0 22px 48px -20px rgba(15,5,11,.62);
}

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

/* 方案卡：再透一點、模糊再重一點，邊框收到幾乎看不見 */
.plan{
  background:linear-gradient(180deg,rgba(232,160,191,.11),rgba(58,30,44,.34));
  border:1px solid rgba(227,180,164,.14);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:var(--soft-edge);
}
.plan:hover{
  border-color:rgba(232,160,191,.34);
  box-shadow:0 0 0 1px rgba(232,160,191,.2), 0 26px 56px -20px rgba(15,5,11,.66), 0 0 30px rgba(232,160,191,.1);
}
.plan.on{
  border-color:rgba(232,160,191,.52);
  background:linear-gradient(180deg,rgba(232,160,191,.2),rgba(58,30,44,.44));
  box-shadow:0 0 0 1px rgba(232,160,191,.4), 0 26px 60px -20px rgba(232,160,191,.24);
}

/* 提示條（含「目前沒有開放中的方案」）。
   原本吃基礎樣式的 var(--o-50)／#FEF2F2 這類實心底，在圖上非常跳。 */
.alert{
  background:rgba(58,30,44,.44) !important;
  border:1px solid rgba(227,180,164,.16) !important;
  border-radius:var(--r-sm);
  color:var(--ink-2) !important;
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:var(--soft-edge);
}
.alert-error{background:rgba(74,26,38,.5) !important;border-color:rgba(240,150,170,.24) !important;color:#F7C9D4 !important}
.alert-warn {background:rgba(70,44,34,.48) !important;border-color:rgba(227,180,164,.26) !important;color:#F0D8C6 !important}
.alert-info {background:rgba(58,30,44,.44) !important;border-color:rgba(227,180,164,.18) !important;color:var(--ink-2) !important}

/* 免責聲明：基礎樣式寫死 #fff／rgba(255,255,255,.7)，一定要蓋掉。
   改成同一套半透明深玫瑰，左邊那條改玫瑰金並淡出。 */
.disclaimer{
  background:rgba(47,24,35,.46) !important;
  border:1px solid rgba(227,180,164,.13) !important;
  border-left:2px solid transparent !important;
  border-image:linear-gradient(180deg,var(--rose-gold),rgba(232,160,191,.15)) 1 !important;
  border-radius:var(--r-sm);
  color:var(--ink-3) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--soft-edge);
}

/* 付款方式列、LINE 提示、輸入框：一起走半透明 */
.pay{
  background:rgba(232,160,191,.06);
  border-color:rgba(227,180,164,.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.pay.on{background:rgba(232,160,191,.15);border-color:rgba(232,160,191,.46)}
.line-box{
  background:rgba(232,160,191,.07) !important;
  border-color:rgba(227,180,164,.14) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.fld input,.fld textarea,.fld select{
  background:rgba(26,11,20,.38);
  border-color:rgba(227,180,164,.15);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* 底部結帳列：原本 .93 幾乎不透明，壓到 .62 再加重模糊，
   捲動時看得到圖在後面走，才不會像貼了一條黑帶。 */
.checkout{
  background:rgba(36,18,32,.62);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
}
.nav{
  background:rgba(36,18,32,.58);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid rgba(227,180,164,.12);
}
.toast{
  background:rgba(58,30,44,.72);
  border-color:rgba(227,180,164,.2);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* 訂單頁的卡片跟著一起透 */
.result-card,.bank-box,.form-card,.card{
  background:linear-gradient(180deg,rgba(232,160,191,.10),rgba(58,30,44,.36));
  border:1px solid rgba(227,180,164,.14);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:var(--soft-edge);
}
.bank-box{background:rgba(232,160,191,.11)}
/* 訂單頁如果沒有背景圖，底色由 .result-page 負責，卡片一樣好看 */

/* 骨架屏也改成粉調半透明，載入中不會先閃一塊實心色 */
.sk{background:linear-gradient(90deg,rgba(58,30,44,.4),rgba(74,40,54,.55),rgba(58,30,44,.4))}