/* ============================================================
   JENNIE CLAW — 7 款精品皮膚 (Skin Themes)
   非破壞式：沒有 data-theme 時 App 維持原生樣子。
   選了皮膚 → body[data-theme="X"] 覆蓋變數，整站重新著色。
   數值與設計稿 1:1。
   ============================================================ */

:root {
  /* 新增變數的安全預設（不覆蓋既有 --bg/--primary/--text…）
     沒選皮膚時 App 維持今天原生樣子；側欄等新變數有合理 fallback。 */
  --sidebar-bg: #FAF7F2;
  --sidebar-text: #1A1A1A;
  --sidebar-muted: #8A8578;
  --sidebar-active-bg: transparent;
  --divider: #E8E2D8;
  --accent-gold: #7A2E5A;
  --accent-gold-grad: #7A2E5A;
  --credit-bg: #e3e6f2;
  --credit-fg: #22c55e;
  --card-bg: #ffffff;
  --card-shadow: none;
  --card-shadow-hover: 0 6px 24px rgba(0,0,0,.05);
  --btn-bg: #1A1A1A;
  --btn-fg: #FAF7F2;
  --btn-shadow: none;
  --orb-a: transparent;
  --orb-b: transparent;
  --orb-c: transparent;
}

/* 現況 — 奶油底 × 暖金，產品現行精品基調 */
body[data-theme="current"] {
  --bg: #C3FFF9;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e3e6f2;
  --surface: #ffffff;
  --surface-hover: rgba(201,169,110,.07);
  --border: #E8E2D8;
  --text: #1A1A1A;
  --text-secondary: #8A8578;
  --text-muted: #8A8578;
  --primary: #7A2E5A;
  --primary-hover: #7A2E5A;
  --primary-light: #22c55e;
  --sidebar-bg: #FAF7F2;
  --sidebar-text: #141414;
  --sidebar-muted: #575247;
  --sidebar-active-bg: transparent;
  --divider: #E8E2D8;
  --accent-gold: #7A2E5A;
  --accent-gold-grad: #7A2E5A;
  --credit-bg: #e3e6f2;
  --credit-fg: #22c55e;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,.05),0 10px 26px rgba(0,0,0,.10);
  --card-shadow-hover: 0 6px 24px rgba(0,0,0,.05);
  --btn-bg: #1A1A1A;
  --btn-fg: #FAF7F2;
  --btn-shadow: none;
  --orb-a: rgba(201,169,110,.55);
  --orb-b: rgba(230,205,150,.5);
  --orb-c: rgba(255,250,240,.9);
}

/* 暖調 — 暖象牙漸層側欄 × 金屬金，溫潤 */
body[data-theme="warm"] {
  --bg: radial-gradient(125% 90% at 72% -5%,#FEEFC4 0%,#F1DCB5 100%);
  --bg-secondary: #FFFEFB;
  --bg-tertiary: #EFE3C9;
  --surface: #FFFEFB;
  --surface-hover: rgba(184,147,90,.09);
  --border: #EADFCB;
  --text: #241E16;
  --text-secondary: #8C8068;
  --text-muted: #8C8068;
  --primary: #B8935A;
  --primary-hover: #B8935A;
  --primary-light: #9A7B36;
  --sidebar-bg: linear-gradient(to right,#E3D4B7 0%,#EFE5D1 100%);
  --sidebar-text: #1C1710;
  --sidebar-muted: #5C5040;
  --sidebar-active-bg: rgba(184,147,90,.1);
  --divider: #E7DCC8;
  --accent-gold: #B8935A;
  --accent-gold-grad: linear-gradient(135deg,#A8803F 0%,#EAD09A 48%,#B8935A 100%);
  --credit-bg: #EFE3C9;
  --credit-fg: #9A7B36;
  --card-bg: linear-gradient(180deg,#FFFEFB 0%,#FBF6EC 100%);
  --card-shadow: 0 1px 2px rgba(74,54,22,.06),0 9px 22px rgba(74,54,22,.12);
  --card-shadow-hover: 0 16px 42px rgba(120,86,30,.16),0 3px 8px rgba(120,86,30,.10);
  --btn-bg: #241E16;
  --btn-fg: #F3ECDF;
  --btn-shadow: 0 6px 18px rgba(36,30,22,.22);
  --orb-a: rgba(245,232,200,.85);
  --orb-b: rgba(184,147,90,.55);
  --orb-c: rgba(250,240,214,.9);
}

/* 深色 — 近黑暖底 × 金箔，戲劇深邃 */
body[data-theme="noir"] {
  --bg: radial-gradient(130% 95% at 75% -10%,#1C1710 0%,#0E0B05 72%);
  --bg-secondary: #231D15;
  --bg-tertiary: rgba(216,181,112,.14);
  --surface: #231D15;
  --surface-hover: rgba(216,181,112,.08);
  --border: rgba(216,181,112,.2);
  --text: #F0E9D8;
  --text-secondary: #9C927D;
  --text-muted: #9C927D;
  --primary: #D8B570;
  --primary-hover: #D8B570;
  --primary-light: #E6C57E;
  --sidebar-bg: linear-gradient(to right,#181208 0%,#2A2319 100%);
  --sidebar-text: #F7F1E2;
  --sidebar-muted: #C7BBA1;
  --sidebar-active-bg: rgba(216,181,112,.1);
  --divider: rgba(216,181,112,.15);
  --accent-gold: #D8B570;
  --accent-gold-grad: linear-gradient(135deg,#9A7A3C 0%,#F2DA9D 46%,#C9A55E 100%);
  --credit-bg: rgba(216,181,112,.14);
  --credit-fg: #E6C57E;
  --card-bg: linear-gradient(180deg,#231D15 0%,#1A150E 100%);
  --card-shadow: 0 2px 6px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.5);
  --card-shadow-hover: 0 22px 52px rgba(0,0,0,.6),0 0 0 1px rgba(216,181,112,.28);
  --btn-bg: linear-gradient(135deg,#C9A55E,#EBD295);
  --btn-fg: #1A150E;
  --btn-shadow: 0 8px 22px rgba(201,165,94,.3);
  --orb-a: rgba(216,181,112,.6);
  --orb-b: rgba(120,90,40,.7);
  --orb-c: rgba(242,218,157,.5);
}

/* 材質 — 冷灰板岩側欄 × 保時捷黃點綴 */
body[data-theme="paper"] {
  --bg: linear-gradient(180deg,#D8DCE1 0%,#CDD3DB 100%);
  --bg-secondary: #FFFFFF;
  --bg-tertiary: rgba(154,160,166,.2);
  --surface: #FFFFFF;
  --surface-hover: rgba(255,255,255,.06);
  --border: #E1E4E8;
  --text: #22262B;
  --text-secondary: #6A7178;
  --text-muted: #6A7178;
  --primary: #9AA0A6;
  --primary-hover: #9AA0A6;
  --primary-light: #5A6168;
  --sidebar-bg: linear-gradient(to right,#272C32 0%,#3A4148 100%);
  --sidebar-text: #EFF2F5;
  --sidebar-muted: #AEB6BF;
  --sidebar-active-bg: rgba(247,209,30,.16);
  --divider: rgba(154,160,166,.28);
  --accent-gold: #9AA0A6;
  --accent-gold-grad: linear-gradient(135deg,#7C828A 0%,#D7DBDF 50%,#9AA0A6 100%);
  --credit-bg: rgba(154,160,166,.2);
  --credit-fg: #5A6168;
  --card-bg: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(30,38,46,.07),0 10px 24px rgba(30,38,46,.13);
  --card-shadow-hover: 0 18px 42px rgba(30,38,46,.16),0 2px 6px rgba(30,38,46,.09);
  --btn-bg: linear-gradient(135deg,#2E3338,#454C53);
  --btn-fg: #F2F4F6;
  --btn-shadow: 0 8px 20px rgba(34,38,43,.3);
  --orb-a: rgba(247,209,30,.7);
  --orb-b: rgba(120,135,150,.6);
  --orb-c: rgba(255,224,64,.62);
}

/* 皇家藍金 — 飽和寶藍側欄 × 亮金，尊貴 */
body[data-theme="royal"] {
  --bg: linear-gradient(180deg,#D0D7F1 0%,#C9D0ED 100%);
  --bg-secondary: #FFFFFF;
  --bg-tertiary: rgba(231,200,110,.2);
  --surface: #FFFFFF;
  --surface-hover: rgba(255,255,255,.06);
  --border: #E8E3D8;
  --text: #1E2440;
  --text-secondary: #6A7090;
  --text-muted: #6A7090;
  --primary: #D8B25A;
  --primary-hover: #D8B25A;
  --primary-light: #F1D788;
  --sidebar-bg: linear-gradient(to right,#2C2F96 0%,#3E45BC 100%);
  --sidebar-text: #F3E0A0;
  --sidebar-muted: #DEC58E;
  --sidebar-active-bg: rgba(224,193,106,.14);
  --divider: rgba(224,193,106,.3);
  --accent-gold: #D8B25A;
  --accent-gold-grad: linear-gradient(135deg,#B8923C 0%,#F2D98E 50%,#CDA552 100%);
  --credit-bg: rgba(231,200,110,.2);
  --credit-fg: #F1D788;
  --card-bg: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(20,30,60,.06),0 10px 24px rgba(20,30,60,.12);
  --card-shadow-hover: 0 16px 40px rgba(20,30,60,.15),0 2px 6px rgba(20,30,60,.08);
  --btn-bg: linear-gradient(135deg,#2C2F96,#3E45BC);
  --btn-fg: #F6EECF;
  --btn-shadow: 0 8px 22px rgba(40,40,150,.4);
  --orb-a: transparent;
  --orb-b: transparent;
  --orb-c: transparent;
}

/* 酒紅金 — 深酒紅側欄 × 暖金，華麗 */
body[data-theme="wine"] {
  --bg: linear-gradient(180deg,#ECDDCA 0%,#E5D7C4 100%);
  --bg-secondary: #FFFFFF;
  --bg-tertiary: rgba(226,190,116,.16);
  --surface: #FFFFFF;
  --surface-hover: rgba(255,255,255,.06);
  --border: #ECE3D7;
  --text: #2B1D1F;
  --text-secondary: #847066;
  --text-muted: #847066;
  --primary: #B68A45;
  --primary-hover: #B68A45;
  --primary-light: #EDCE82;
  --sidebar-bg: #2E1218;
  --sidebar-text: #F9EFE9;
  --sidebar-muted: #DBC3BB;
  --sidebar-active-bg: rgba(226,190,116,.14);
  --divider: rgba(226,190,116,.20);
  --accent-gold: #B68A45;
  --accent-gold-grad: linear-gradient(135deg,#9A7338 0%,#E6CD8A 50%,#B68A45 100%);
  --credit-bg: rgba(226,190,116,.16);
  --credit-fg: #EDCE82;
  --card-bg: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(60,20,28,.06),0 10px 24px rgba(60,20,28,.12);
  --card-shadow-hover: 0 16px 40px rgba(60,20,28,.15),0 2px 6px rgba(60,20,28,.08);
  --btn-bg: linear-gradient(135deg,#4A1E28,#6E2E3B);
  --btn-fg: #F4E6DC;
  --btn-shadow: 0 8px 20px rgba(74,30,40,.3);
  --orb-a: rgba(180,70,90,.6);
  --orb-b: rgba(230,205,138,.5);
  --orb-c: rgba(120,40,55,.7);
}

/* 墨綠金 — 墨綠側欄 × 金，經典傳承 */
body[data-theme="jade"] {
  --bg: linear-gradient(180deg,#E1E5D2 0%,#DAE0CC 100%);
  --bg-secondary: #FFFFFF;
  --bg-tertiary: rgba(223,192,116,.16);
  --surface: #FFFFFF;
  --surface-hover: rgba(255,255,255,.06);
  --border: #E5E8DE;
  --text: #1F2A24;
  --text-secondary: #6E7A70;
  --text-muted: #6E7A70;
  --primary: #A98A3F;
  --primary-hover: #A98A3F;
  --primary-light: #EBCF80;
  --sidebar-bg: #103128;
  --sidebar-text: #F1F7F1;
  --sidebar-muted: #C4D5C9;
  --sidebar-active-bg: rgba(223,192,116,.14);
  --divider: rgba(223,192,116,.20);
  --accent-gold: #A98A3F;
  --accent-gold-grad: linear-gradient(135deg,#8E7232 0%,#E0CB84 50%,#A98A3F 100%);
  --credit-bg: rgba(223,192,116,.16);
  --credit-fg: #EBCF80;
  --card-bg: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(10,40,28,.06),0 10px 24px rgba(10,40,28,.12);
  --card-shadow-hover: 0 16px 40px rgba(10,40,28,.15),0 2px 6px rgba(10,40,28,.08);
  --btn-bg: linear-gradient(135deg,#163A2E,#23503F);
  --btn-fg: #EFE7CF;
  --btn-shadow: 0 8px 20px rgba(16,40,30,.3);
  --orb-a: rgba(70,170,120,.55);
  --orb-b: rgba(224,203,132,.5);
  --orb-c: rgba(40,120,85,.65);
}

/* ---- 側欄動態大圓微移動光暈 (optional flourish, phase 2) ---- */
/* ⚠️ 不可在此設 .sidebar{position:relative;overflow:hidden} —— 會蓋掉 App 既有的
   .sidebar{position:fixed} 版面（側欄掉回流內 → 內容區多空一個側欄寬），
   且 overflow:hidden 會裁掉側欄往右彈出的提示氣泡。
   phase 2 啟用 orb 時：position:fixed 本身即為 absolute 子元素的定位脈絡，
   orb 會被正確包住；若要裁切請改用「側欄內層容器」做 overflow:hidden，勿動 .sidebar。 */
.jc-orbs { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.jc-orb { position:absolute; border-radius:50%; filter:blur(40px); mix-blend-mode:soft-light; }
.jc-orb-a { width:230px; height:230px; background:var(--orb-a,transparent); left:-70px; top:6%;  animation:jcDrift1 19s ease-in-out infinite; }
.jc-orb-b { width:280px; height:280px; background:var(--orb-b,transparent); right:-100px; top:36%; animation:jcDrift2 24s ease-in-out infinite; }
.jc-orb-c { width:210px; height:210px; background:var(--orb-c,transparent); left:-50px; bottom:4%; animation:jcDrift3 27s ease-in-out infinite; }
.sidebar > *:not(.jc-orbs) { position:relative; z-index:1; }
@keyframes jcDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(48px,34px) scale(1.12)} }
@keyframes jcDrift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-44px,46px) scale(.9)} }
@keyframes jcDrift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-32px) scale(1.15)} }