/* ── 背景圖 ── */
/* 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/1788612494488-c810a8fb.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;
}

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

/* 歐文 goldenova —— 黑金風
   參考 Royal Analytics 的調性：純黑底、皇家金強調、深灰黑卡片配金色細邊、
   金色漸層按鈕，整體奢華尊貴。
   這間店用內建版型（沒有自訂 index.html），所以只覆蓋樣式。
   2026-09-05 建立。 */

:root{
  /* 底：兩層黑。頁面最底是純黑，卡片浮一階 */
  --bg:#0A0A0A;
  --surface:#1A1A1A;

  /* 字：白 → 淡金灰，越次要越偏金調，整體才不會是冷灰 */
  --ink:#F5F1E8;
  --ink-2:#CFC6B0;
  --ink-3:#8F866F;
  --ink-4:#645D4C;

  /* 線：低調的金，細細一條就有貴氣，粗了會俗 */
  --line:#2E2820;
  --line-2:#201C16;

  --r:14px;
  --r-sm:10px;

  /* 皇家金色階 */
  --o-500:#C9A84C;
  --o-600:#A98B34;
  --o-400:#D4AF37;
  --o-300:#E3C86B;
  --o-200:#3A3220;
  --o-100:#2A2418;
  --o-50:#1E1A11;
}

/* 金色漸層 —— 按鈕、標題、分隔線共用同一條，整體才有一致的光澤 */
html{background:#0A0A0A}
body{
  min-height:100vh;
  background:#0A0A0A;
  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;
}

/* 頂部一抹極淡的金光暈。純黑大平面容易死板，這層讓它有深度。
   固定在視窗上緣、不吃點擊、壓在內容底下。 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(680px 320px at 50% -6%, rgba(201,168,76,.16), transparent 62%),
    radial-gradient(420px 260px at 12% 42%, rgba(201,168,76,.06), transparent 60%);
}
.sheet{position:relative;z-index:1}

/* ── 品牌區 ── */
.brand{padding-top:34px;padding-bottom:8px}
.brand h1{
  font-size:clamp(32px,8.5vw,46px);
  font-weight:900;letter-spacing:.02em;line-height:1.2;
  /* 金屬感：淺金 → 深金的漸層文字 */
  background:linear-gradient(180deg,#F2DFA4 0%,var(--o-400) 46%,var(--o-600) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{
  letter-spacing:.22em;font-size:11.5px;text-transform:uppercase;
  color:var(--o-500);margin-top:10px;
}
.avatar{
  background:linear-gradient(145deg,var(--o-300),var(--o-600));
  color:#0A0A0A;
  box-shadow:0 0 0 1px rgba(201,168,76,.45), 0 10px 30px rgba(201,168,76,.22);
}

/* ── 區塊標題：金色細分隔線 ── */
.block{margin-bottom:32px}
.block-head{
  padding-bottom:10px;border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,var(--o-500),rgba(201,168,76,.08)) 1;
}
.block-head h2{
  font-size:18px;font-weight:900;letter-spacing:.04em;color:var(--ink);
}
.more-link{
  font-weight:500;letter-spacing:.1em;font-size:12px;
  text-transform:uppercase;color:var(--o-500);
}

/* ── 方案卡：深灰黑 + 金色細邊 ── */
.plan{
  background:linear-gradient(180deg,#1E1E1E,#161616);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 2px 14px rgba(0,0,0,.5);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.plan:hover{
  border-color:rgba(201,168,76,.45);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.6), 0 0 24px rgba(201,168,76,.08);
}
.plan.on{
  border-color:var(--o-500);
  background:linear-gradient(180deg,#221E14,#171512);
  box-shadow:0 0 0 1px var(--o-500), 0 14px 36px rgba(201,168,76,.18);
}
.plan-name{font-weight:700;letter-spacing:.01em;color:var(--ink)}
.plan-price b{
  font-size:28px;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(180deg,#F2DFA4,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:#0A0A0A;font-weight:700;font-size:11px;letter-spacing:.08em;
  border-radius:999px;padding:4px 12px;
}
.plan-feats li::before{content:"◆";color:var(--o-500);font-size:9px}
.tick{border-radius:50%;border-width:2px;border-color:var(--o-500)}

/* ── 付款方式與表單 ── */
.pay{
  background:var(--surface);
  border:1px 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-500);
}
.fld > span{
  letter-spacing:.14em;font-size:11px;text-transform:uppercase;
  color:var(--o-500);font-weight:500;
}
.fld input,.fld textarea,.fld select{
  background:#141414;
  border:1px solid var(--line);
  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(201,168,76,.16);
}

/* ── 底部結帳列 ── */
.checkout{
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(201,168,76,.1),var(--o-500),rgba(201,168,76,.1)) 1;
}
.total b{
  font-size:28px;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(180deg,#F2DFA4,var(--o-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* 主要行動按鈕（「讓願望成真」那顆）：金色漸層 + 光澤 */
.pay-btn{
  background:linear-gradient(135deg,#E3C86B 0%,var(--o-400) 38%,var(--o-600) 100%);
  color:#14110A;
  font-size:16.5px;font-weight:900;letter-spacing:.1em;
  border-radius:999px;border:none;
  box-shadow:0 8px 26px rgba(201,168,76,.34), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.pay-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(201,168,76,.42), inset 0 1px 0 rgba(255,255,255,.45);
  filter:brightness(1.05);
}
.pay-btn:active{transform:translateY(0)}
.pay-btn:disabled{
  background:#2A2620;color:var(--ink-4);
  box-shadow:none;filter:none;
}

/* ── 其他零件 ── */
.line-box{background:var(--o-50);border:1px solid var(--o-200);border-radius:var(--r-sm)}
.sk{background:linear-gradient(90deg,#161616,#242017,#161616)}
.toast{
  background:#1C1A15;color:var(--ink);
  border:1px solid var(--o-200);border-radius:999px;font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.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(201,168,76,.06),rgba(201,168,76,.5),rgba(201,168,76,.06)) 1;
  margin-top:10px;
}
.footer .copyright{color:var(--ink-4)}

/* ── 訂單頁／付款頁 ──
   同一套黑金，客人結帳走過去不換皮。 */
.result-page{background:#0A0A0A}
.result-card,.bank-box{
  background:linear-gradient(180deg,#1E1E1E,#161616);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 6px 26px rgba(0,0,0,.55);
  color:var(--ink);
}
.bank-box{background:var(--o-50);border-color:var(--o-200)}
.bank-box h4{color:var(--o-500)}
.result-card h1{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,#F2DFA4,var(--o-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.copy-row b{color:var(--ink)}
.copy-btn{background:var(--o-200);color:var(--o-300);border:1px solid var(--o-200);border-radius:999px}
.nav{
  background:rgba(10,10,10,.92);
  border-bottom:1px solid var(--line);
}
.logo-mark{
  background:linear-gradient(145deg,var(--o-300),var(--o-600));
  color:#0A0A0A;
  box-shadow:0 6px 18px rgba(201,168,76,.25);
}
.btn-primary{
  background:linear-gradient(135deg,#E3C86B,var(--o-400) 38%,var(--o-600));
  color:#14110A;font-weight:900;border-radius:999px;border:none;
  box-shadow:0 8px 24px rgba(201,168,76,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-ghost{
  background:#161616;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;
}
.badge-status{border-radius:999px}
.result-icon{border:1px solid var(--o-200)}

/* ══════════════════════════════════════════════════════════
   背景圖模式（2026-09-05）
   後台設了「整頁背景圖」之後，通用樣式會套一層白紗 + 白卡片
   （那是為淺色版型設計的預設值），黑金風格會整個被洗掉。
   這一段把遮罩與卡片全部換成深黑半透明，讓黑金足球圖透出來。
   ══════════════════════════════════════════════════════════ */

:root{
  /* 蓋在圖上的紗。
     這張圖本身就已經是近黑底、金色只在邊緣（足球、金弧、底部圓台），
     所以紗要壓很輕 —— 蓋太厚金色就全沒了，等於白貼一張圖。
     上面幾乎不蓋，下面稍微壓一點讓結帳區的字穩一些。 */
  --veil-top: rgba(10,10,10,.26);
  --veil-bottom: rgba(10,10,10,.60);
  /* 卡片：深灰黑半透明，不是白色。圖的中間是大片黑，透出來很自然 */
  --panel: rgba(24,24,24,.66);
  /* 頁首頁尾與底部結帳列：再實一點，按鈕要看得清楚 */
  --panel-bar: rgba(10,10,10,.84);
}

/* body 底色不能是實心黑，否則圖被壓在下面。
   圖還沒載入時由 html 的黑頂著，不會閃白。 */
body{background-color:transparent !important}

/* 版面容器保持透明，背景圖才透得出來 */
.sheet,.plans,.block{background-color:transparent !important}

/* 頂部那層金光暈調淡 —— 圖本身已經有金色元素，疊太多會糊 */
body::before{
  background:
    radial-gradient(680px 320px at 50% -6%, rgba(201,168,76,.10), transparent 62%),
    radial-gradient(420px 260px at 12% 42%, rgba(201,168,76,.04), transparent 60%);
}

/* 方案卡：從實心深灰改成半透明黑玻璃，金邊保留 */
.plan{
  background:linear-gradient(180deg, rgba(32,32,32,.64), rgba(16,16,16,.72)) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.plan.on{
  background:linear-gradient(180deg, rgba(201,168,76,.16), rgba(20,18,12,.80)) !important;
}

/* 付款選項與輸入框：同一套黑玻璃 */
.pay{background:rgba(26,26,26,.66) !important}
.pay.on{background:rgba(201,168,76,.14) !important}
.fld input,.fld textarea,.fld select{background:rgba(12,12,12,.66)}

/* 訂單頁／付款頁的卡片也要半透明，不然走過去又變實心 */
.result-card,.bank-box{
  background:linear-gradient(180deg, rgba(32,32,32,.66), rgba(16,16,16,.74)) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.bank-box{background:rgba(201,168,76,.10) !important}

/* ── 融合層補齊（2026-09-05）──
   上面已經處理過卡片與 .block，但還有兩處吃基礎樣式的實心／白底：
     · .disclaimer  → style.css 寫死 #fff、simple.css 寫死 rgba(255,255,255,.7)
     · .alert 系列  → 「目前沒有開放中的方案」那條，實心的 var(--o-50)
   白底壓在黑金圖上最刺眼，一起改成同一套黑玻璃。
   邊界也從硬金線改成「極淡內圈線 + 外散深暈」，卡片才化得進背景。 */

:root{ --soft-edge:0 0 0 1px rgba(201,168,76,.10), 0 22px 48px -20px rgba(0,0,0,.7); }

/* 容器一律透明（.wrap／.result-main 是訂單頁的外框） */
.sheet,.block,.plans,.wrap,.result-main{
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.disclaimer{
  background:rgba(20,20,20,.60) !important;
  border:1px solid rgba(201,168,76,.12) !important;
  border-left:2px solid transparent !important;
  border-image:linear-gradient(180deg,var(--o-400),rgba(201,168,76,.12)) 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);
}

.alert{
  background:rgba(24,24,24,.62) !important;
  border:1px solid rgba(201,168,76,.16) !important;
  border-radius:var(--r-sm);
  color:var(--ink-2) !important;
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:var(--soft-edge);
}
.alert-error{background:rgba(48,18,18,.66) !important;border-color:rgba(240,150,150,.24) !important;color:#F2CFCF !important}
.alert-warn {background:rgba(46,36,16,.64) !important;border-color:rgba(201,168,76,.3) !important;color:#EBD79B !important}
.alert-info {background:rgba(24,24,24,.62) !important;border-color:rgba(201,168,76,.18) !important;color:var(--ink-2) !important}

/* 卡片邊界柔化 */
.plan,.result-card,.bank-box,.form-card,.card{box-shadow:var(--soft-edge)}
.toast{
  background:rgba(26,26,26,.78) !important;
  border-color:rgba(201,168,76,.22);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.line-box{background:rgba(26,26,26,.6) !important;border-color:rgba(201,168,76,.18) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sk{background:linear-gradient(90deg,rgba(26,26,26,.55),rgba(46,40,32,.66),rgba(26,26,26,.55))}