/* 配色模版預覽（本機）：5 套風格。金色為預設（黑底＋金）。
   變數說明：
   g/s/d/k/m = 強調色（主／亮或深文字／深／更深／最淺）的 RGB
   b/c/e     = 背景（區塊／頁面／卡片）的 RGB；bg900/800/700 為對應 hex
   w         = 主要文字（墨色）；t3–t6 = 次要灰字由深到淺 */

:root {
  --fx-gold:232,192,104; --fx-hi:255,240,200;
  --g1:212; --g2:175; --g3:55;   --s1:232; --s2:200; --s3:74;   --d1:184; --d2:150; --d3:47;
  --k1:154; --k2:122; --k3:38;   --m1:240; --m2:215; --m3:122;
  --b1:5;   --b2:5;   --b3:5;    --c1:10;  --c2:10;  --c3:10;   --e1:26;  --e2:26;  --e3:26;
  --w1:255; --w2:255; --w3:255;
  --t31:209; --t32:213; --t33:219;  --t41:156; --t42:163; --t43:175;
  --t51:107; --t52:114; --t53:128;  --t61:75;  --t62:85;  --t63:99;
  --fw-gold:#d4af37; --fw-gold-soft:#e8c84a; --fw-gold-deep:#b8962f;
  --bg900:#050505; --bg800:#0a0a0a; --bg700:#1a1a1a;
}

/* ===== 粉色：淺粉米白底，深梅紅字，大圓角、柔光 ===== */
html[data-theme="pink"] {
  --fx-gold:194,69,122; --fx-hi:163,48,106;
  --g1:194; --g2:69;  --g3:122;  --s1:163; --s2:48;  --s3:106;  --d1:143; --d2:36;  --d3:89;
  --k1:120; --k2:28;  --k3:80;   --m1:150; --m2:50;  --m3:100;
  --b1:253; --b2:232; --b3:240;  --c1:255; --c2:246; --c3:249;  --e1:255; --e2:255; --e3:255;
  --w1:59;  --w2:22;  --w3:40;
  --t31:92; --t32:52; --t33:72;  --t41:120; --t42:80; --t43:100;
  --t51:135; --t52:100; --t53:118; --t61:150; --t62:115; --t63:132;
  --fw-gold:#c2457a; --fw-gold-soft:#a3306a; --fw-gold-deep:#8f2459;
  --bg900:#fde8f0; --bg800:#fff6f9; --bg700:#ffffff;
}
html[data-theme="pink"] .rounded, html[data-theme="pink"] .rounded-lg, html[data-theme="pink"] .rounded-xl,
html[data-theme="pink"] .rounded-2xl, html[data-theme="pink"] .rounded-3xl { border-radius: 1.75rem; }
html[data-theme="pink"] .btn { box-shadow: 0 8px 22px -10px rgba(var(--g1),var(--g2),var(--g3),.6); }
html[data-theme="pink"] body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(60% 40% at 12% 0%, rgba(255,170,200,.35), transparent 70%),
              radial-gradient(50% 40% at 100% 100%, rgba(255,205,170,.30), transparent 70%); }

/* ===== 紫色：鮮明深紫漸層底，華麗光暈 ===== */
html[data-theme="purple"] {
  --fx-gold:201,168,255; --fx-hi:230,212,255;
  --g1:184; --g2:156; --g3:245;  --s1:226; --s2:208; --s3:255;  --d1:138; --d2:104; --d3:222;
  --k1:176; --k2:140; --k3:240;  --m1:236; --m2:224; --m3:255;
  --b1:30;  --b2:14;  --b3:66;   --c1:45;  --c2:24;  --c3:94;   --e1:62;  --e2:38;  --e3:118;
  --t31:228; --t32:220; --t33:250;  --t41:196; --t42:184; --t43:232;
  --t51:166; --t52:154; --t53:212;  --t61:140; --t62:128; --t63:192;
  --fw-gold:#b89cf5; --fw-gold-soft:#e3d6ff; --fw-gold-deep:#8a66dc;
  --bg900:#1e0d42; --bg800:#2d1856; --bg700:#3f2470;
}
html[data-theme="purple"] .rounded, html[data-theme="purple"] .rounded-lg, html[data-theme="purple"] .rounded-xl,
html[data-theme="purple"] .rounded-2xl, html[data-theme="purple"] .rounded-3xl { border-radius: 1.1rem; }
html[data-theme="purple"] .btn { box-shadow: 0 0 28px -4px rgba(var(--g1),var(--g2),var(--g3),.6); }
html[data-theme="purple"] body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(70% 50% at 85% 0%, rgba(200,120,255,.38), transparent 70%),
              radial-gradient(60% 50% at 0% 100%, rgba(120,90,255,.34), transparent 70%),
              linear-gradient(160deg, rgba(150,80,230,.22), transparent 55%); }

/* ===== 藍色：白／淡藍底，深藍字，方正、細格線 ===== */
html[data-theme="blue"] {
  --fx-gold:43,108,176; --fx-hi:30,78,140;
  --g1:43;  --g2:108; --g3:176;  --s1:30;  --s2:78;  --s3:140;  --d1:26;  --d2:69;  --d3:119;
  --k1:20;  --k2:55;  --k3:100;  --m1:40;  --m2:85;  --m3:150;
  --b1:232; --b2:241; --b3:251;  --c1:246; --c2:250; --c3:255;  --e1:255; --e2:255; --e3:255;
  --w1:12;  --w2:35;  --w3:64;
  --t31:40; --t32:66; --t33:99;  --t41:70; --t42:98; --t43:130;
  --t51:100; --t52:125; --t53:155; --t61:120; --t62:145; --t63:170;
  --fw-gold:#2b6cb0; --fw-gold-soft:#1e4e8c; --fw-gold-deep:#1a4577;
  --bg900:#e8f1fb; --bg800:#f6faff; --bg700:#ffffff;
}
html[data-theme="blue"] .rounded, html[data-theme="blue"] .rounded-lg, html[data-theme="blue"] .rounded-xl,
html[data-theme="blue"] .rounded-2xl, html[data-theme="blue"] .rounded-3xl { border-radius: .2rem; }
html[data-theme="blue"] .btn, html[data-theme="blue"] .btn.rounded-full { border-radius: .25rem; }
html[data-theme="blue"] body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: linear-gradient(rgba(var(--g1),var(--g2),var(--g3),.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(var(--g1),var(--g2),var(--g3),.07) 1px, transparent 1px);
  background-size: 44px 44px; }

/* ===== 綠色：淡綠米色底，深綠字，自然、柔和 ===== */
html[data-theme="green"] {
  --fx-gold:47,125,89; --fx-hi:31,101,68;
  --g1:47;  --g2:125; --g3:89;   --s1:31;  --s2:101; --s3:68;   --d1:25;  --d2:85;  --d3:56;
  --k1:20;  --k2:70;  --k3:45;   --m1:35;  --m2:110; --m3:75;
  --b1:229; --b2:241; --b3:232;  --c1:244; --c2:250; --c3:245;  --e1:255; --e2:255; --e3:255;
  --w1:15;  --w2:46;  --w3:31;
  --t31:45; --t32:80; --t33:62;  --t41:75; --t42:108; --t43:90;
  --t51:100; --t52:130; --t53:112; --t61:120; --t62:150; --t63:132;
  --fw-gold:#2f7d59; --fw-gold-soft:#1f6544; --fw-gold-deep:#195538;
  --bg900:#e5f1e8; --bg800:#f4faf5; --bg700:#ffffff;
}
html[data-theme="green"] .rounded, html[data-theme="green"] .rounded-lg, html[data-theme="green"] .rounded-xl,
html[data-theme="green"] .rounded-2xl, html[data-theme="green"] .rounded-3xl { border-radius: .9rem; }
html[data-theme="green"] .btn.rounded-full { border-radius: 1rem; }
html[data-theme="green"] body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(rgba(var(--g1),var(--g2),var(--g3),.16) 1.5px, transparent 2px);
  background-size: 28px 28px; }

/* ===== 進站風格選擇（第一次進站出現）與左下角切換鈕：固定深色，不隨風格變 ===== */
#fw-picker { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.95); overflow:auto; }
#fw-picker[hidden] { display:none; }
#fw-picker .fp-panel { width:100%; max-width:760px; text-align:center; color:#f2f2f2; padding:8px; }
#fw-picker h2 { font-size:24px; margin:0 0 8px; color:#e8c84a; letter-spacing:.12em; }
#fw-picker p { font-size:15px; margin:0 0 22px; color:#bbb; line-height:1.7; }
#fw-picker .fp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:640px) { #fw-picker .fp-grid { grid-template-columns:repeat(5,1fr); } }
@media (max-width:639px) { #fw-picker .fp-card:last-child:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:calc(50% - 6px); } }
#fw-picker .fp-card { cursor:pointer; border:2px solid transparent; background:transparent; padding:8px; color:#eee;
  font:inherit; border-radius:14px; text-align:center; }
#fw-picker .fp-card:hover, #fw-picker .fp-card:focus-visible { border-color:rgba(255,255,255,.55); outline:none; }
#fw-picker .fp-card.on { border-color:var(--c-ac); }
#fw-picker .fp-sw { display:block; height:96px; background:var(--c-bg); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--c-r); position:relative; margin-bottom:10px; overflow:hidden; }
#fw-picker .fp-sw i { display:block; position:absolute; left:12px; right:12px; height:10px; background:var(--c-ac); top:16px; border-radius:var(--c-b); }
#fw-picker .fp-sw b { display:block; position:absolute; left:12px; bottom:14px; width:58%; height:22px; background:var(--c-ac); border-radius:var(--c-b); }
#fw-picker .fp-name { display:block; font-size:16px; font-weight:700; }
#fw-picker .fp-desc { display:block; font-size:13px; color:#aaa; margin-top:2px; }
#fw-picker .fp-skip { margin-top:20px; background:none; border:none; color:#999; font-size:14px; cursor:pointer; text-decoration:underline; }
#fw-corner { position:fixed; left:12px; bottom:12px; z-index:9998; border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.7); color:#fff; border-radius:999px; padding:8px 14px; font-size:14px; cursor:pointer; }
#fw-corner:hover { background:rgba(0,0,0,.9); }
@media (prefers-reduced-motion: no-preference) { #fw-picker .fp-card { transition:border-color .2s; } }

/* ===== 改為小提示條：第一次進站在底部顯示，不擋住頁面 ===== */
#fw-picker { inset:auto 0 0 0; top:auto; height:auto; display:block; padding:8px 8px 10px; background:rgba(0,0,0,.92); overflow:visible; }
#fw-picker .fp-panel { max-width:none; padding:0; }
#fw-picker h2 { font-size:14px; margin:0 0 6px; letter-spacing:.06em; }
#fw-picker p { display:none; }
#fw-picker .fp-grid { grid-template-columns:repeat(5,1fr); gap:6px; }
@media (max-width:639px) { #fw-picker .fp-card:last-child:nth-child(odd) { grid-column:auto; width:auto; justify-self:stretch; } }
#fw-picker .fp-card { padding:4px; border-radius:10px; }
#fw-picker .fp-sw { height:40px; margin-bottom:4px; }
#fw-picker .fp-sw i { top:8px; height:6px; }
#fw-picker .fp-sw b { bottom:7px; height:12px; }
#fw-picker .fp-name { font-size:13px; }
#fw-picker .fp-desc { display:none; }
#fw-picker .fp-skip { margin-top:4px; font-size:12px; }

/* ===== 選購頁：價格與錯誤文字（淺色底需要深色字）===== */
:root { --price:#f0d77a; }
html[data-theme="pink"] { --price:#a3306a; }
html[data-theme="purple"] { --price:#e6d4ff; }
html[data-theme="blue"] { --price:#1e4e8c; }
html[data-theme="green"] { --price:#1f6544; }
html[data-theme="pink"] .text-red-300, html[data-theme="blue"] .text-red-300, html[data-theme="green"] .text-red-300 { color:#9b1c3a !important; }

/* ===== 會員中心：顏色變數（預設＝黑底金字）===== */
:root { --fm-bg:#07070a; --fm-bg2:#0b0a08; --fm-dark:#1a1408; --fm-card-rgb:22,20,16; --fm-card:rgba(22,20,16,.78);
  --fm-line:rgba(var(--fx-gold),.22); --fm-text:#f3e2b0; --fm-dim:rgba(243,226,176,.72); --fm-gold:#f6e3a1;
  --fm-err:#ffc9c2; --fm-err2:#e5747a; --fm-err3:#8c1420; --fm-ok:#c9f0d6; }
html[data-theme="pink"] { --fm-bg:#fff6f9; --fm-bg2:#fde8f0; --fm-dark:#fbe0ea; --fm-card-rgb:255,255,255; --fm-card:rgba(255,255,255,.9);
  --fm-line:rgba(var(--fx-gold),.35); --fm-text:#5a1f3a; --fm-dim:rgba(90,31,58,.72); --fm-gold:#a3306a;
  --fm-err:#9b1c3a; --fm-err2:#b8334f; --fm-err3:#9b1c3a; --fm-ok:#1f6544; }
html[data-theme="purple"] { --fm-bg:#2d185e; --fm-bg2:#3b1c82; --fm-dark:#3b1c82; --fm-card-rgb:59,28,130; --fm-card:rgba(59,28,130,.78);
  --fm-line:rgba(var(--fx-gold),.3); --fm-text:#efe6ff; --fm-dim:rgba(239,230,255,.72); --fm-gold:#e6d4ff; }
html[data-theme="blue"] { --fm-bg:#f6faff; --fm-bg2:#e8f1fb; --fm-dark:#e8f1fb; --fm-card-rgb:255,255,255; --fm-card:rgba(255,255,255,.9);
  --fm-line:rgba(var(--fx-gold),.35); --fm-text:#0c2340; --fm-dim:rgba(12,35,64,.72); --fm-gold:#1e4e8c;
  --fm-err:#9b1c3a; --fm-err2:#b8334f; --fm-err3:#9b1c3a; --fm-ok:#1f6544; }
html[data-theme="green"] { --fm-bg:#f4faf5; --fm-bg2:#e5f1e8; --fm-dark:#e5f1e8; --fm-card-rgb:255,255,255; --fm-card:rgba(255,255,255,.9);
  --fm-line:rgba(var(--fx-gold),.35); --fm-text:#0f2e1f; --fm-dim:rgba(15,46,31,.72); --fm-gold:#1f6544;
  --fm-err:#9b1c3a; --fm-err2:#b8334f; --fm-err3:#9b1c3a; --fm-ok:#1f6544; }
/* 會員輸入框：淺色風格改白底 */
html[data-theme="pink"] .fm-input, html[data-theme="blue"] .fm-input, html[data-theme="green"] .fm-input { background:rgba(255,255,255,.95) !important; color:var(--fm-text) !important; border-color:var(--fm-line) !important; }
html[data-theme="purple"] .fm-input { background:rgba(20,10,50,.7) !important; color:var(--fm-text) !important; }

/* ===== 內部討論（/chat/）：正文與警示字色 ===== */
:root { --chat-body:#d8c070; --chat-danger:#f0a8a8; }
html[data-theme="pink"] { --chat-body:#6b2a4a; --chat-danger:#9b1c3a; }
html[data-theme="purple"] { --chat-body:#efe6ff; --chat-danger:#ffc9c2; }
html[data-theme="blue"] { --chat-body:#1e3a5f; --chat-danger:#9b1c3a; }
html[data-theme="green"] { --chat-body:#1f4a33; --chat-danger:#9b1c3a; }

/* ===== 夥伴區：文字與警示的 RGB（淺色風格改深色）===== */
:root { --fm-text-rgb:243,226,176; --fm-err-rgb:240,120,110; }
html[data-theme="pink"] { --fm-text-rgb:90,31,58; --fm-err-rgb:155,28,58; }
html[data-theme="purple"] { --fm-text-rgb:239,230,255; --fm-err-rgb:240,120,110; }
html[data-theme="blue"] { --fm-text-rgb:12,35,64; --fm-err-rgb:155,28,58; }
html[data-theme="green"] { --fm-text-rgb:15,46,31; --fm-err-rgb:155,28,58; }
#fw-corner { touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; }

/* ===== 夥伴底部導覽：淺色風格改成淺色底＋深色字（原本是深色底＋淡黃字，淺色頁面上看不清）===== */
html[data-theme="pink"] .fp-tabbar, html[data-theme="blue"] .fp-tabbar, html[data-theme="green"] .fp-tabbar {
  background: rgba(255,255,255,.97) !important; border-top-color: rgba(var(--g1),var(--g2),var(--g3),.45) !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,.08) !important; }
html[data-theme="pink"] .fp-tab, html[data-theme="blue"] .fp-tab, html[data-theme="green"] .fp-tab { color: var(--fm-text) !important; }
html[data-theme="pink"] .fp-tab.on, html[data-theme="blue"] .fp-tab.on, html[data-theme="green"] .fp-tab.on { color: var(--fw-gold) !important; background: rgba(var(--g1),var(--g2),var(--g3),.12) !important; }
html[data-theme="pink"] .fp-tab.on::after, html[data-theme="blue"] .fp-tab.on::after, html[data-theme="green"] .fp-tab.on::after { background: var(--fw-gold) !important; box-shadow: none !important; }