@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Cabin+Sketch:wght@700&family=Yusei+Magic&family=Zen+Kurenaido&family=Klee+One:wght@400;600&family=Palette+Mosaic&family=DotGothic16&family=Gamja+Flower&display=swap');

/* MoneyFlow NAS 版 — 主樣式 */

:root {
  --teal: #14b8a6;
  --teal-light: #ccfbf1;
  --teal-dark: #0f766e;
  --blue: #0ea5e9;
  --blue-light: #e0f2fe;
  --rose: #f43f5e;
  --rose-light: #ffe4e6;
  --purple: #a855f7;
  --purple-light: #f3e8ff;
  --indigo: #6366f1;
  --indigo-light: #e0e7ff;
  --amber: #f59e0b;
  --amber-light: #fef3c7;
  --caramel: #B36D41;
  --caramel-light: #F1E4DE;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --white: #ffffff;
  --sidebar-w: 64px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.05);
  
  /* Semantic Backgrounds & Sidebar */
  --bg-main: #e6fcf5;
  --bg-sidebar: var(--teal-dark);
  --sidebar-text: rgba(255,255,255,0.6);
  --sidebar-text-active: #ffffff;
  --sidebar-hover-bg: rgba(255,255,255,0.1);
  --sidebar-active-bg: var(--teal);
  
  --btn-primary-bg: var(--teal);
  --btn-primary-text: #ffffff;
}

/* ── Theme System ───────────────────────────────────────────── */
/* ── 莫蘭迪色系主題 (morand-1 ~ morand-9) ───────────────────── */
/*
 * 每組 4 色語意分配（莫蘭迪配色原則）：
 *   c1 最淺 → card / panel 背景（有色調，不純白）
 *   c2 中淺 → sidebar、卡片邊框、分隔線
 *   c3 中深 → 主文字色、按鈕、標題
 *   c4 最深 → 標題強調、深陰影、最暗 UI
 *
 * Logo filter：brightness(0) 轉黑 → 疊色至 c1（最淺色）
 * 讓家徽以柔和淺色浮現於 c2 深色側邊欄上
 */

/* ① 玫瑰粉陶  c1=#F5EFEB (粉白)  c2=#B57E74 (磚紅)  c3=#82574F (深可可)  c4=#683531 (深酒紅) */
.theme-morand-1 {
  --bg-main:        #EFE5E1;
  --bg-sidebar:     #B57E74;
  --white:          #F8F3F1;
  --gray-50:        #F5ECE9;
  --gray-100:       #EAE0DC;
  --gray-200:       #E5CCC7;
  --gray-300:       #D8B4AD;
  --gray-400:       #9C6C63;
  --gray-500:       #B57E74;
  --gray-700:       #82574F;
  --gray-800:       #683531;
  --text-primary:   #82574F;
  --text-secondary: rgba(130, 87, 79, 0.65);
  --teal:           #B57E74;
  --teal-light:     rgba(181, 126, 116, 0.15);
  --teal-dark:      #82574F;
  --blue:           #B57E74;
  --blue-light:     rgba(181, 126, 116, 0.12);
  --rose:           #683531;
  --rose-light:     rgba(104, 53, 49, 0.12);
  --amber:          #B57E74;
  --amber-light:    rgba(181, 126, 116, 0.15);
  --indigo:         #82574F;
  --indigo-light:   rgba(130, 87, 79, 0.12);
  --purple:         #683531;
  --purple-light:   rgba(104, 53, 49, 0.12);
  --caramel:        #82574F;
  --caramel-light:  rgba(130, 87, 79, 0.15);
  --sidebar-text:         rgba(248, 243, 241, 0.72);
  --sidebar-text-active:  #F8F3F1;
  --sidebar-hover-bg:     rgba(248, 243, 241, 0.15);
  --sidebar-active-bg:    rgba(248, 243, 241, 0.28);
  --btn-primary-bg:       #82574F;
  --btn-primary-text:     #F8F3F1;
}
.theme-morand-1 .logo-img-real {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* ② 靜謐霧綠  c1=#E1E6DC (薄荷灰白)  c2=#9FB09B (鼠尾草綠)  c3=#7E907B (灰綠)  c4=#556652 (深灰綠) */
.theme-morand-2 {
  --bg-main:        #D7DDD3;
  --bg-sidebar:     #7E907B;
  --white:          #EBF0E8;
  --gray-50:        #E4EAE0;
  --gray-100:       #D8E0D4;
  --gray-200:       #CAD2C6;
  --gray-300:       #AEC0AA;
  --gray-400:       #748571;
  --gray-500:       #7E907B;
  --gray-700:       #556652;
  --gray-800:       #3C4A3A;
  --text-primary:   #556652;
  --text-secondary: rgba(85, 102, 82, 0.65);
  --teal:           #7E907B;
  --teal-light:     rgba(126, 144, 123, 0.15);
  --teal-dark:      #556652;
  --blue:           #9FB09B;
  --blue-light:     rgba(159, 176, 155, 0.12);
  --rose:           #556652;
  --rose-light:     rgba(85, 102, 82, 0.12);
  --amber:          #7E907B;
  --amber-light:    rgba(126, 144, 123, 0.15);
  --indigo:         #556652;
  --indigo-light:   rgba(85, 102, 82, 0.12);
  --purple:         #3C4A3A;
  --purple-light:   rgba(60, 74, 58, 0.12);
  --caramel:        #7E907B;
  --caramel-light:  rgba(126, 144, 123, 0.15);
  --sidebar-text:         rgba(235, 240, 232, 0.72);
  --sidebar-text-active:  #EBF0E8;
  --sidebar-hover-bg:     rgba(235, 240, 232, 0.15);
  --sidebar-active-bg:    rgba(235, 240, 232, 0.28);
  --btn-primary-bg:       #556652;
  --btn-primary-text:     #EBF0E8;
}
.theme-morand-2 .logo-img-real {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* ③ 暖燕麥泥  c1=#EEEDE6 (燕麥白)  c2=#D6CFC7 (淺奶茶灰)  c3=#ACA394 (中灰褐)  c4=#80786C (深暖灰) */
.theme-morand-3 {
  --bg-main:        #E4DDD5;
  --bg-sidebar:     #ACA394;
  --white:          #F4F3ED;
  --gray-50:        #EDECE4;
  --gray-100:       #E2E0D6;
  --gray-200:       #D4D0C5;
  --gray-300:       #C6C1B4;
  --gray-400:       #9A9182;
  --gray-500:       #ACA394;
  --gray-700:       #80786C;
  --gray-800:       #5E574D;
  --text-primary:   #80786C;
  --text-secondary: rgba(128, 120, 108, 0.65);
  --teal:           #ACA394;
  --teal-light:     rgba(172, 163, 148, 0.15);
  --teal-dark:      #80786C;
  --blue:           #D6CFC7;
  --blue-light:     rgba(214, 207, 199, 0.12);
  --rose:           #80786C;
  --rose-light:     rgba(128, 120, 108, 0.12);
  --amber:          #ACA394;
  --amber-light:    rgba(172, 163, 148, 0.15);
  --indigo:         #80786C;
  --indigo-light:   rgba(128, 120, 108, 0.12);
  --purple:         #5E574D;
  --purple-light:   rgba(94, 87, 77, 0.12);
  --caramel:        #ACA394;
  --caramel-light:  rgba(172, 163, 148, 0.15);
  --sidebar-text:         rgba(244, 243, 237, 0.72);
  --sidebar-text-active:  #F4F3ED;
  --sidebar-hover-bg:     rgba(244, 243, 237, 0.15);
  --sidebar-active-bg:    rgba(244, 243, 237, 0.28);
  --btn-primary-bg:       #80786C;
  --btn-primary-text:     #F4F3ED;
}
.theme-morand-3 .logo-img-real {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* ④ 珊瑚肉桂  c1=#F7EFE4 (膚粉白)  c2=#DF9E82 (珊瑚粉橘)  c3=#A66E58 (陶土橘)  c4=#7A4C3C (鐵鏽深紅) */
.theme-morand-4 {
  --bg-main:        #F2E5D5;
  --bg-sidebar:     #DF9E82;
  --white:          #FAF6F0;
  --gray-50:        #F5ECDF;
  --gray-100:       #EADBC9;
  --gray-200:       #DFCBB5;
  --gray-300:       #CCAFA0;
  --gray-400:       #B8907E;
  --gray-500:       #DF9E82;
  --gray-700:       #A66E58;
  --gray-800:       #7A4C3C;
  --text-primary:   #A66E58;
  --text-secondary: rgba(166, 110, 88, 0.65);
  --teal:           #DF9E82;
  --teal-light:     rgba(223, 158, 130, 0.15);
  --teal-dark:      #A66E58;
  --blue:           #DF9E82;
  --blue-light:     rgba(223, 158, 130, 0.12);
  --rose:           #7A4C3C;
  --rose-light:     rgba(122, 76, 60, 0.12);
  --amber:          #DF9E82;
  --amber-light:    rgba(223, 158, 130, 0.15);
  --indigo:         #A66E58;
  --indigo-light:   rgba(166, 110, 88, 0.12);
  --purple:         #7A4C3C;
  --purple-light:   rgba(122, 76, 60, 0.12);
  --caramel:        #A66E58;
  --caramel-light:  rgba(166, 110, 88, 0.15);
  --sidebar-text:         rgba(250, 246, 240, 0.75);
  --sidebar-text-active:  #FAF6F0;
  --sidebar-hover-bg:     rgba(250, 246, 240, 0.15);
  --sidebar-active-bg:    rgba(250, 246, 240, 0.28);
  --btn-primary-bg:       #A66E58;
  --btn-primary-text:     #FAF6F0;
}
.theme-morand-4 .logo-img-real {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* ⑤ 霧霾藍灰  c1=#D1DCDE (藍灰白)  c2=#9EB0BD (中藍灰)  c3=#6A7E8F (石板藍)  c4=#4A5D6B (深黛藍) */
.theme-morand-5 {
  --bg-main:        #C2D0D4;
  --bg-sidebar:     #6A7E8F;
  --white:          #DFE8EA;
  --gray-50:        #D7E1E3;
  --gray-100:       #CBD6D8;
  --gray-200:       #BCC8CB;
  --gray-300:       #A5B7BC;
  --gray-400:       #8198A0;
  --gray-500:       #6A7E8F;
  --gray-700:       #4A5D6B;
  --gray-800:       #2E3D48;
  --text-primary:   #4A5D6B;
  --text-secondary: rgba(74, 93, 107, 0.65);
  --teal:           #6A7E8F;
  --teal-light:     rgba(106, 126, 143, 0.15);
  --teal-dark:      #4A5D6B;
  --blue:           #9EB0BD;
  --blue-light:     rgba(158, 176, 189, 0.12);
  --rose:           #4A5D6B;
  --rose-light:     rgba(74, 93, 107, 0.12);
  --amber:          #6A7E8F;
  --amber-light:    rgba(106, 126, 143, 0.15);
  --indigo:         #4A5D6B;
  --indigo-light:   rgba(74, 93, 107, 0.12);
  --purple:         #2E3D48;
  --purple-light:   rgba(46, 61, 72, 0.12);
  --caramel:        #6A7E8F;
  --caramel-light:  rgba(106, 126, 143, 0.15);
  --sidebar-text:         rgba(223, 232, 234, 0.72);
  --sidebar-text-active:  #DFE8EA;
  --sidebar-hover-bg:     rgba(223, 232, 234, 0.15);
  --sidebar-active-bg:    rgba(223, 232, 234, 0.28);
  --btn-primary-bg:       #4A5D6B;
  --btn-primary-text:     #DFE8EA;
}
.theme-morand-5 .logo-img-real {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* ⑥ 迷霧草木  c1=#E2E6DF (極淡白)  c2=#A6BCA6 (灰綠)  c3=#60736C (暗黛綠)  c4=#45494C (深炭灰) */
.theme-morand-6 {
  --bg-main:        #D4DCD0;
  --bg-sidebar:     #60736C;
  --white:          #ECEFEA;
  --gray-50:        #E2E6DF;
  --gray-100:       #D4DBD1;
  --gray-200:       #C6D0C2;
  --gray-300:       #B4C2B0;
  --gray-400:       #8A9E86;
  --gray-500:       #A6BCA6;
  --gray-700:       #45494C;
  --gray-800:       #2E3133;
  --text-primary:   #45494C;
  --text-secondary: rgba(69, 73, 76, 0.65);
  --teal:           #A6BCA6;
  --teal-light:     rgba(166, 188, 166, 0.15);
  --teal-dark:      #60736C;
  --blue:           #A6BCA6;
  --blue-light:     rgba(166, 188, 166, 0.12);
  --rose:           #60736C;
  --rose-light:     rgba(96, 115, 108, 0.12);
  --amber:          #A6BCA6;
  --amber-light:    rgba(166, 188, 166, 0.15);
  --indigo:         #60736C;
  --indigo-light:   rgba(96, 115, 108, 0.12);
  --purple:         #45494C;
  --purple-light:   rgba(69, 73, 76, 0.12);
  --caramel:        #60736C;
  --caramel-light:  rgba(96, 115, 108, 0.15);
  --sidebar-text:         rgba(236, 239, 234, 0.75);
  --sidebar-text-active:  #ECEFEA;
  --sidebar-hover-bg:     rgba(236, 239, 234, 0.15);
  --sidebar-active-bg:    rgba(236, 239, 234, 0.28);
  --btn-primary-bg:       #60736C;
  --btn-primary-text:     #ECEFEA;
}
.theme-morand-6 .logo-img-real {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* ⑦ 芥末暖沙  c1=#F3EDE0 (奶油白)  c2=#E5CDA2 (鵝黃)  c3=#C8AE80 (芥末黃)  c4=#9B8659 (暗沙黃) */
.theme-morand-7 {
  --bg-main:        #EAE0CE;
  --bg-sidebar:     #C8AE80;
  --white:          #FAF6EE;
  --gray-50:        #F4EDE0;
  --gray-100:       #EADCC6;
  --gray-200:       #DFCCAC;
  --gray-300:       #D4BBA2;
  --gray-400:       #B89A7E;
  --gray-500:       #C8AE80;
  --gray-700:       #9B8659;
  --gray-800:       #70603F;
  --text-primary:   #9B8659;
  --text-secondary: rgba(155, 134, 89, 0.65);
  --teal:           #C8AE80;
  --teal-light:     rgba(200, 174, 128, 0.15);
  --teal-dark:      #9B8659;
  --blue:           #E5CDA2;
  --blue-light:     rgba(229, 205, 162, 0.12);
  --rose:           #9B8659;
  --rose-light:     rgba(155, 134, 89, 0.12);
  --amber:          #C8AE80;
  --amber-light:    rgba(200, 174, 128, 0.15);
  --indigo:         #9B8659;
  --indigo-light:   rgba(155, 134, 89, 0.12);
  --purple:         #70603F;
  --purple-light:   rgba(112, 96, 63, 0.12);
  --caramel:        #9B8659;
  --caramel-light:  rgba(155, 134, 89, 0.15);
  --sidebar-text:         rgba(250, 246, 238, 0.75);
  --sidebar-text-active:  #FAF6EE;
  --sidebar-hover-bg:     rgba(250, 246, 238, 0.15);
  --sidebar-active-bg:    rgba(250, 246, 238, 0.28);
  --btn-primary-bg:       #9B8659;
  --btn-primary-text:     #FAF6EE;
}
.theme-morand-7 .logo-img-real {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* ⑧ 丁香灰紫  c1=#EAE6EA (丁香白)  c2=#C9BDCE (薰衣草灰)  c3=#96899E (石板紫)  c4=#605368 (深灰紫) */
.theme-morand-8 {
  --bg-main:        #DDD6DD;
  --bg-sidebar:     #96899E;
  --white:          #F4F0F4;
  --gray-50:        #EAE5EA;
  --gray-100:       #DED8DE;
  --gray-200:       #D2CBD2;
  --gray-300:       #C6BCC6;
  --gray-400:       #9A8D9A;
  --gray-500:       #C9BDCE;
  --gray-700:       #605368;
  --gray-800:       #453A4B;
  --text-primary:   #605368;
  --text-secondary: rgba(96, 83, 104, 0.65);
  --teal:           #C9BDCE;
  --teal-light:     rgba(201, 189, 206, 0.15);
  --teal-dark:      #96899E;
  --blue:           #C9BDCE;
  --blue-light:     rgba(201, 189, 206, 0.12);
  --rose:           #605368;
  --rose-light:     rgba(96, 83, 104, 0.12);
  --amber:          #C9BDCE;
  --amber-light:    rgba(201, 189, 206, 0.15);
  --indigo:         #96899E;
  --indigo-light:   rgba(150, 137, 158, 0.12);
  --purple:         #453A4B;
  --purple-light:   rgba(69, 58, 75, 0.12);
  --caramel:        #96899E;
  --caramel-light:  rgba(150, 137, 158, 0.15);
  --sidebar-text:         rgba(244, 240, 244, 0.75);
  --sidebar-text-active:  #F4F0F4;
  --sidebar-hover-bg:     rgba(244, 240, 244, 0.15);
  --sidebar-active-bg:    rgba(244, 240, 244, 0.28);
  --btn-primary-bg:       #605368;
  --btn-primary-text:     #F4F0F4;
}
.theme-morand-8 .logo-img-real {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* ⑨ 極簡冷灰  c1=#EDEFEF (極淡冷灰)  c2=#8C8C8C (中灰)  c3=#646B75 (藍灰)  c4=#45494C (深炭灰) */
.theme-morand-9 {
  --bg-main:        #DDDEDE;
  --bg-sidebar:     #646B75;
  --white:          #F3F5F5;
  --gray-50:        #EDEFEF;
  --gray-100:       #E1E4E4;
  --gray-200:       #D4D8D8;
  --gray-300:       #C6CCCC;
  --gray-400:       #8A9494;
  --gray-500:       #8C8C8C;
  --gray-700:       #45494C;
  --gray-800:       #2E3133;
  --text-primary:   #45494C;
  --text-secondary: rgba(69, 73, 76, 0.65);
  --teal:           #8C8C8C;
  --teal-light:     rgba(140, 140, 140, 0.15);
  --teal-dark:      #646B75;
  --blue:           #646B75;
  --blue-light:     rgba(100, 107, 117, 0.12);
  --rose:           #45494C;
  --rose-light:     rgba(69, 73, 76, 0.12);
  --amber:          #8C8C8C;
  --amber-light:    rgba(140, 140, 140, 0.15);
  --indigo:         #646B75;
  --indigo-light:   rgba(100, 107, 117, 0.12);
  --purple:         #2E3133;
  --purple-light:   rgba(46, 49, 51, 0.12);
  --caramel:        #8C8C8C;
  --caramel-light:  rgba(140, 140, 140, 0.15);
  --sidebar-text:         rgba(243, 245, 245, 0.75);
  --sidebar-text-active:  #F3F5F5;
  --sidebar-hover-bg:     rgba(243, 245, 245, 0.15);
  --sidebar-active-bg:    rgba(243, 245, 245, 0.28);
  --btn-primary-bg:       #45494C;
  --btn-primary-text:     #F3F5F5;
}
.theme-morand-9 .logo-img-real {
  filter: brightness(0) invert(1) opacity(0.9) !important;
}

/* 透明玻璃主題 (Liquid Glass / visionOS style) */
.theme-glass {
  --bg-sidebar: rgba(var(--glass-color-rgb, 255, 255, 255), 0.12);
  --sidebar-text: var(--glass-text);
  --sidebar-text-active: var(--glass-text);
  --sidebar-hover-bg: rgba(var(--glass-color-rgb, 255, 255, 255), 0.25);
  --sidebar-active-bg: rgba(var(--glass-color-rgb, 255, 255, 255), 0.38);
  
  --bg-card: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.13);
  --bg-subtle: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.07);
  --sep: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.18);
  --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
  
  --gray-50: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.05);
  --gray-100: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.1);
  --gray-200: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.15);
  --gray-400: rgba(15, 23, 42, 0.55);
  --gray-500: rgba(15, 23, 42, 0.7);
  --gray-700: rgba(15, 23, 42, 0.88);
  --gray-800: rgba(15, 23, 42, 0.95);
  --white: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.22);
  
  --teal: #0891b2;
  --teal-light: rgba(8, 145, 178, 0.15);
  --teal-dark: #0e7490;
  --blue: #2563eb;
  --blue-light: rgba(37, 99, 235, 0.15);
  --rose: #e11d48;
  --rose-light: rgba(225, 29, 72, 0.12);
  --purple: #7c3aed;
  --purple-light: rgba(124, 58, 237, 0.12);
  --indigo: #4338ca;
  --indigo-light: rgba(67, 56, 202, 0.12);
  --amber: #d97706;
  --amber-light: rgba(217, 119, 6, 0.12);
  --caramel: #92400e;
  --caramel-light: rgba(146, 64, 14, 0.12);
  
  --btn-primary-bg: rgba(22, 163, 74, 0.85);
  --btn-primary-text: #ffffff;

  /* --- Liquid Glass System (bright white, Apple-style) --- */
  --glass-surface: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.12);
  --glass-surface-blur: 16px;
  
  --glass-secondary-bg: linear-gradient(135deg, rgba(var(--glass-ui-color-rgb, 255,255,255), 0.16), rgba(var(--glass-ui-color-rgb, 255,255,255), 0.08));
  --glass-secondary-blur: 20px;
  --glass-secondary-border: 1px solid rgba(var(--glass-ui-color-rgb, 255,255,255), 0.30);
  --glass-secondary-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(var(--glass-ui-color-rgb, 255,255,255), 0.55);

  --glass-primary-bg: linear-gradient(135deg, rgba(var(--glass-ui-color-rgb, 255,255,255), 0.20), rgba(var(--glass-ui-color-rgb, 255,255,255), 0.10));
  --glass-primary-blur: 28px;
  --glass-primary-border: 1px solid rgba(var(--glass-ui-color-rgb, 255,255,255), 0.38);
  --glass-primary-shadow: 0 16px 40px rgba(0, 0, 0, 0.10), inset 0 1.5px 2px rgba(var(--glass-ui-color-rgb, 255,255,255), 0.65);

  /* Content Surface (Tables / text-heavy areas) — dynamic frosting */
  --glass-heavy-bg: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.72);
  --glass-heavy-blur: 32px;
  --glass-heavy-border: 1px solid rgba(var(--glass-ui-color-rgb, 255,255,255), 0.55);
  --glass-heavy-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.9);
  
  /* Text System — dynamic based on glass luminance */
  --text-primary: var(--glass-ui-text, rgba(15, 23, 42, 0.92));
  --text-secondary: var(--glass-ui-text, rgba(15, 23, 42, 0.65));
  --text-tertiary: var(--glass-ui-text, rgba(15, 23, 42, 0.42));
  
  /* Functional Colors */
  --color-revenue: #16A34A;
  --color-expense: #DC2626;
  --color-neutral: #64748b;

  /* ── Glass Adjustable Variables (Slider-controlled) ── */
  --glass-opacity: 0.13;
  --glass-blur: 16px;
  --glass-shadow-depth: 0.10;
  --glass-saturation: 1.40;
  --glass-inner-light: 0.55;
  --glass-edge-glow: 0.30;
  --glass-border-opacity: 0.28;
  /* Refraction / specular intensity (0~1) */
  --glass-refraction: 0.5;
}

/* Premium Background & Lighting System */
html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body.one-page-layout {
  height: 100vh;
  overflow: hidden !important;
}

/* 玻璃背景主要容器 */
body.theme-glass {
  background-color: #f0f4f8; /* 備用底色 */
  background-image: 
    linear-gradient(180deg,
      rgba(255, 255, 255, calc(var(--glass-opacity, 0.13) * 0.3)) 0%,
      rgba(200, 220, 255, calc(var(--glass-opacity, 0.13) * 0.15)) 100%
    ),
    var(--glass-custom-bg, url('../assets/glass_bg.png'));
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text-primary);
  height: 100vh;
  position: relative;
}

/* 全域背景霧層 — 還原為單純的亮度微調，不包含磨砂，避免影響整體效能 */
body.theme-glass::after {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: brightness(1.02) contrast(1.01) saturate(1.05);
  -webkit-backdrop-filter: brightness(1.02) contrast(1.01) saturate(1.05);
  z-index: -2;
  pointer-events: none;
  transition: backdrop-filter 0.25s ease;
}

/* Noise / grain texture overlay */
body.theme-glass::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  opacity: 0.025;
  pointer-events: none;
  z-index: -1;
}

/* 玻璃層級套用 — 還原底層大玻璃到主容器範圍 */
body.theme-glass .page-content {
  color: var(--glass-base-text, rgba(15, 23, 42, 0.85));
  backdrop-filter: var(--glass-base-filter, blur(24px) saturate(140%));
  -webkit-backdrop-filter: var(--glass-base-filter, blur(24px) saturate(140%));
  background: var(--glass-base-bg, rgba(255, 255, 255, 0.13));
  border-radius: 28px;
  margin: 16px 96px 16px 28px;
  padding: 24px 32px;
  border: var(--glass-base-border, 1px solid rgba(255,255,255,0.28));
  box-shadow: var(--glass-base-shadow, 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5));
  min-height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  width: calc(100% - 124px);
  /* max-width removed: was causing ghost frame on right side when viewport > 1100px */
  transition: backdrop-filter 0.25s ease, background 0.25s ease, border 0.25s ease, box-shadow 0.25s ease;
}

/* 舊工具 class 已被移除，因為直接注入變數字串更安全 */

/* 投資明細頁：縮小玻璃板，四邊對稱留白，置中於 main-area */
body.theme-glass .page-content.tab-investment {
  margin: 12px 96px 12px 28px;
  width: calc(100% - 124px);
  /* max-width removed: was causing ghost frame on right side */
  min-height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
}

/* 一頁式佈局下的頁面容器 */
body.one-page-layout.theme-glass .page-content {
  height: calc(100vh - 32px);
  min-height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  padding: 20px 24px;
  overflow: hidden;
}

/* 磨砂面板效果 - Liquid Glass (uses unified complete string vars) */
/* ── 框架層（中間大框）：sidebar, page-header-pill, nw-chart-card, sa-group ── */
body.theme-glass .sidebar,
body.theme-glass .page-header-pill,
body.theme-glass .topbar,
body.theme-glass .modal-box,
body.theme-glass .nw-chart-card,
body.theme-glass .sa-group,
body.theme-glass .monthly-summary-grid,
body.theme-glass .chart-card,
body.theme-glass #budget-progress-panel {
  backdrop-filter: var(--glass-filter, blur(16px) saturate(140%)) !important;
  -webkit-backdrop-filter: var(--glass-filter, blur(16px) saturate(140%)) !important;
  background: var(--glass-bg, rgba(255,255,255,0.13)) !important;
  border: var(--glass-border, 1px solid rgba(255,255,255,0.28)) !important;
  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5)) !important;
  border-radius: 20px;
  overflow: hidden;
  color: var(--glass-text, rgba(15, 23, 42, 0.85));
  transition: backdrop-filter 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease, color 0.3s ease;
  animation: none;
}

/* ── UI 內容層（內部小卡）：topbar, card, dropdown, filter-box, table-card, fintech-ring-card, modal-box ── */
body.theme-glass .card:not(.chart-card):not(#budget-progress-panel),
body.theme-glass .dropdown,
body.theme-glass .fintech-ring-card,
body.theme-glass .filter-box,
body.theme-glass #btn-add-tx-fab {
  backdrop-filter: var(--glass-ui-filter, blur(16px) saturate(140%));
  -webkit-backdrop-filter: var(--glass-ui-filter, blur(16px) saturate(140%));
  background: var(--glass-ui-bg, rgba(255,255,255,0.13));
  border: var(--glass-ui-border, 1px solid rgba(255,255,255,0.28));
  box-shadow: var(--glass-ui-shadow, 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5));
  border-radius: 20px;
  color: var(--glass-ui-text, rgba(15, 23, 42, 0.85));
  transition: backdrop-filter 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease, color 0.3s ease;
}
/* 進度環卡片必須允許溢出以顯示呼吸光暈 */
body.theme-glass .fintech-ring-card {
  overflow: visible !important;
  animation: none; /* 這裡的 none 指的是進入動畫，不影響內部的 hover 動畫 */
}
}

/* Layer 4: specular top highlight (Hype4 style) */
body.theme-glass .card::before,
body.theme-glass .modal-box::before,
body.theme-glass .sa-group::before,
body.theme-glass .sidebar::before,
body.theme-glass .page-header-pill::before,
body.theme-glass .nw-chart-card::before,
body.theme-glass .fintech-ring-card::before,
body.theme-glass .topbar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--glass-ui-highlight-horz, linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent));
  pointer-events: none;
  z-index: 1;
}

/* Left edge specular glow */
body.theme-glass .modal-box::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  background: var(--glass-highlight-vert, linear-gradient(180deg, rgba(255,255,255,0.5), transparent, rgba(255,255,255,0.1)));
  pointer-events: none;
  z-index: 1;
}
body.theme-glass .card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  background: var(--glass-ui-highlight-vert, linear-gradient(180deg, rgba(255,255,255,0.5), transparent, rgba(255,255,255,0.1)));
  pointer-events: none;
  z-index: 1;
}

/* ── 框架層 (Group 2) 全域強制變色 ── */
body.theme-glass .sidebar,
body.theme-glass .topbar,
body.theme-glass .page-header-pill,
body.theme-glass .year-nav {
  color: var(--glass-text) !important;
  text-shadow: var(--glass-text-shadow) !important;
}

body.theme-glass .sidebar .logo-img-real,
body.theme-glass .topbar .logo-img-real,
body.theme-glass .page-header-pill img {
  /* 絕對純白化：先壓黑再反轉，解決染色問題 */
  filter: var(--glass-icon-filter, none) !important;
}

/* 強制標題文字連動 */
body.theme-glass .sidebar-logo .logo-text,
body.theme-glass .topbar .logo-text,
body.theme-glass .topbar .pill-title,
body.theme-glass .topbar h2,
body.theme-glass .page-header-pill h2,
body.theme-glass .page-header-pill .page-subtitle,
body.theme-glass .yearly-header h1,
body.theme-glass .year-label,
body.theme-glass .year-nav-label {
  color: var(--glass-text) !important;
  text-shadow: var(--glass-text-shadow) !important;
}

body.theme-glass .sidebar-logo img {
  filter: var(--glass-icon-filter, none) !important;
}

/* ── UI 內容層 (Group 1) 深度強制變色 ── */
body.theme-glass .card,
body.theme-glass .table-card,
body.theme-glass .modal-box,
body.theme-glass .summary-table,
body.theme-glass .yearly-table,
body.theme-glass .category-table,
body.theme-glass .fintech-ring-card,
body.theme-glass .bs-accordion-item {
  color: var(--glass-ui-text) !important;
  text-shadow: var(--glass-ui-text-shadow) !important;
}

/* 強制卡片內所有文字標籤連動 (除非是紅綠金額) */
body.theme-glass .card h2,
body.theme-glass .card h3,
body.theme-glass .card h4,
body.theme-glass .card p,
body.theme-glass .card span:not(.text-danger):not(.text-success):not(.text-teal):not(.text-red):not(.future-amount-only):not(.future-amount-mixed),
body.theme-glass .card div:not(.text-danger):not(.text-success):not(.text-teal):not(.text-red):not(.future-amount-only):not(.future-amount-mixed),
body.theme-glass .card strong,
body.theme-glass .card .fw,
body.theme-glass .card .big-num,
body.theme-glass .card .label,
body.theme-glass .card .sub-label,
body.theme-glass .card .nw-val-big,
body.theme-glass .card .nw-label-sub,
body.theme-glass .card td,
body.theme-glass .card th,
body.theme-glass .card .sticky-col,
body.theme-glass .card .section-label,
body.theme-glass .bs-accordion-header span,
body.theme-glass .bs-accordion-header div,
body.theme-glass .bs-accordion-content p {
  color: var(--glass-ui-text) !important;
  text-shadow: var(--glass-ui-text-shadow) !important;
}

/* 內容層圖示同步 */
body.theme-glass .card .icon-svg,
body.theme-glass .card .btn-svg,
body.theme-glass .modal-box .btn-svg,
body.theme-glass #btn-add-tx-fab svg,
body.theme-glass .btn-icon i,
body.theme-glass .bs-accordion-header svg {
  filter: var(--glass-ui-icon-filter, none) !important;
}

/* 下拉選單 */
body.theme-glass select.input,
body.theme-glass .year-select-group select,
body.theme-glass .year-label,
body.theme-glass .year-nav-label,
body.theme-glass .page-header-pill span:not(.text-danger):not(.text-success):not(.text-teal):not(.text-red),
body.theme-glass .page-header-pill h2,
body.theme-glass .page-header-pill div:not(.header-flat-stats):not(.stat-item) {
  color: var(--glass-text) !important;
  text-shadow: var(--glass-text-shadow) !important;
}

/* ── 底層大玻璃 (Group 3) ── */
body.theme-glass .page-content {
  color: var(--glass-base-text) !important;
}

/* ── 導航按鈕及圖示—終屬框架層，連動 --glass-icon-filter ── */
body.theme-glass .nav-btn,
body.theme-glass .btn-icon,
body.theme-glass .btn-icon-transparent {
  color: var(--glass-text, rgba(15, 23, 42, 0.65)) !important;
}

body.theme-glass .sidebar .nav-btn svg,
body.theme-glass .sidebar .btn-icon svg,
body.theme-glass .topbar .nav-btn svg,
body.theme-glass .topbar .btn-icon svg,
body.theme-glass .page-header-pill .btn-icon svg {
  filter: var(--glass-icon-filter, none) !important;
}
body.theme-glass .owner-select {
  border-color: var(--glass-border);
}

body.theme-glass .table-card {
  backdrop-filter: var(--glass-ui-filter, blur(16px) saturate(140%));
  -webkit-backdrop-filter: var(--glass-ui-filter, blur(16px) saturate(140%));
  background: var(--glass-ui-bg, rgba(255,255,255,0.13));
  border: var(--glass-ui-border, 1px solid rgba(255,255,255,0.28));
  box-shadow: var(--glass-ui-shadow, 0 8px 24px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.3));
  border-radius: 24px;
}


/* ── Glass Slider 樣式系統 ─────────────────────────────────── */
.glass-slider-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

.glass-slider-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.glass-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.glass-slider-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 預設用白色，變數覆寫實際顾色 */
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
}
/* 強制：在 theme-glass 下框架層滑桿标籤連動框架層變數 */
body.theme-glass .glass-framework-slider .glass-slider-label,
body.theme-glass .glass-framework-slider .glass-slider-value {
  color: var(--glass-text) !important;
  text-shadow: var(--glass-text-shadow, none) !important;
}
/* 強制：在 theme-glass 下 UI 層滑桿标籤連動 UI 層變數 */
body.theme-glass .glass-ui-slider .glass-slider-label,
body.theme-glass .glass-ui-slider .glass-slider-value {
  color: var(--glass-ui-text) !important;
  text-shadow: var(--glass-ui-text-shadow, none) !important;
}

.glass-slider-label .label-icon {
  margin-right: 5px;
  opacity: 0.9;
}

.glass-slider-value {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--glass-ui-text, #ffffff);
  text-shadow: var(--glass-ui-text-shadow, 0 1px 2px rgba(0,0,0,0.8));
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 2px 8px;
  min-width: 42px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Slider Track 基底 */
.glass-slider-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 已填充的部分（用 JS 動態設定 width） */
.glass-slider-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  pointer-events: none;
  transition: width 0.05s linear;
  
  /* Logics to be handled by JS:
    const textColor = c > 160 ? 'rgba(15, 23, 42, 0.95)' : 'rgba(255, 255, 255, 0.95)';
    const textSub = c > 160 ? 'rgba(15, 23, 42, 0.65)' : 'rgba(255, 255, 255, 0.65)';
    const iconFilter = c > 160 ? 'none' : 'brightness(0) invert(1)';
    root.style.setProperty('--glass-text', textColor);
    root.style.setProperty('--glass-text-sub', textSub);
    root.style.setProperty('--glass-icon-filter', iconFilter);
  */
}

/* 透明度 slider - 藍白色 */
.glass-slider-item[data-slider="transparency"] .glass-slider-fill {
  background: linear-gradient(90deg, rgba(147, 197, 253, 0.6), rgba(186, 230, 253, 0.95));
  box-shadow: 0 0 8px rgba(147, 197, 253, 0.5);
}

/* 模糊與陰影度 slider - 紫藍色 */
.glass-slider-item[data-slider*="depth"] .glass-slider-fill,
.glass-slider-item[data-slider*="blur"] .glass-slider-fill {
  background: linear-gradient(90deg, rgba(165, 180, 252, 0.6), rgba(196, 181, 253, 0.95));
  box-shadow: 0 0 8px rgba(165, 180, 252, 0.5);
}

/* 折射 slider - 珍珠白金 */
.glass-slider-item[data-slider*="refraction"] .glass-slider-fill {
  background: linear-gradient(90deg, rgba(209, 213, 219, 0.5), rgba(252, 211, 77, 0.7), rgba(255, 255, 255, 0.95));
  box-shadow: 0 0 10px rgba(252, 211, 77, 0.35);
}

/* 色調 slider - 琥珀漸層 */
.glass-slider-item[data-slider*="color"] .glass-slider-fill {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.5), rgba(253, 186, 116, 0.8), rgba(255, 255, 255, 0.95));
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

/* range input 重置 */
input[type="range"].glass-range {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  z-index: 2;
}

/* Webkit thumb */
input[type="range"].glass-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(220, 230, 255, 0.85) 45%,
    rgba(150, 170, 220, 0.7) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
input[type="range"].glass-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(255, 255, 255, 0.18),
    inset 0 1px 2px rgba(255, 255, 255, 0.9);
}
input[type="range"].glass-range:active::-webkit-slider-thumb {
  transform: scale(1.05);
}

/* Firefox thumb */
input[type="range"].glass-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(220, 230, 255, 0.85) 45%,
    rgba(150, 170, 220, 0.7) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

/* Primary Glass - 用於核心統計卡 (總資產等) */
body.theme-glass .summary-grid .card {
  backdrop-filter: var(--glass-ui-filter, blur(16px) saturate(140%));
  -webkit-backdrop-filter: var(--glass-ui-filter, blur(16px) saturate(140%));
  background: var(--glass-ui-bg, rgba(255,255,255,0.13));
  border: var(--glass-ui-border, 1px solid rgba(255,255,255,0.28));
  box-shadow: var(--glass-ui-shadow, 0 12px 32px rgba(0,0,0,0.1), inset 0 1.5px 2px rgba(255,255,255,0.5));
  position: relative;
  overflow: hidden;
}

body.theme-glass .summary-grid .card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  animation: lightSweep 5s linear infinite;
}

@keyframes lightSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Hover 系統 - 亮白玻璃適配 */
body.theme-glass .card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, calc(var(--glass-opacity) * 1.8 + 0.04));
  border-color: rgba(255, 255, 255, calc(var(--glass-border-opacity) * 1.5));
  box-shadow: 0 12px 28px rgba(0, 0, 0, calc(var(--glass-shadow-depth) * 1.2));
}

/* Layer 5: 滑鼠互動局部高光 */
body.theme-glass .card.glass-lit::after {
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, calc(var(--glass-refraction, 0.5) * 0.28)) 0%,
    transparent 65%
  ) !important;
  pointer-events: none;
}

body.theme-glass .table-card .card:hover {
  transform: none; /* 表格內的小卡不位移 */
}

/* 景深系統 (Depth/Elevation) */
body.theme-glass .summary-grid { z-index: 10; }
body.theme-glass .chart-grid { z-index: 5; }
body.theme-glass .table-card { z-index: 1; }

/* 修正 Modal 與 Dropdown */
body.theme-glass .modal-box {
  background: var(--glass-ui-bg) !important;
  backdrop-filter: var(--glass-ui-filter) !important;
  -webkit-backdrop-filter: var(--glass-ui-filter) !important;
  border: var(--glass-ui-border) !important;
  box-shadow: var(--glass-ui-shadow) !important;
  animation: modalEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.95) translateY(10px); filter: blur(5px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

body.theme-glass .btn-outline:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

/* 側邊欄：Floating Dock 感 */
body.theme-glass .sidebar {
  backdrop-filter: var(--glass-filter, blur(16px) saturate(160%));
  -webkit-backdrop-filter: var(--glass-filter, blur(16px) saturate(160%));
  background: var(--glass-bg, rgba(255,255,255,0.13));
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  max-height: calc(100vh - 48px);
  width: 64px;
  border-radius: 20px;
  border: var(--glass-border, 1px solid rgba(255,255,255,0.28));
  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0,0,0,0.12));
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  overflow: visible;
}

body.theme-glass .nav-btn {
  border-radius: 18px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--glass-text) !important;
}

body.theme-glass .nav-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  color: var(--glass-text) !important;
  transform: translateY(-1px);
}

body.theme-glass .nav-btn:hover svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}

body.theme-glass .nav-btn.active {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  color: var(--glass-text) !important;
  transform: scale(1.05);
}

body.theme-glass .nav-btn.active svg {
  filter: var(--glass-icon-filter, none);
}

body.theme-glass .sidebar-bottom {
  padding-bottom: 20px;
}

/* 主區域配合側邊欄偏移 */
body.theme-glass .main-area {
  margin-left: calc(var(--sidebar-w) + 16px);
}

body.theme-glass .bs-outer-header {
  backdrop-filter: blur(var(--glass-blur, 16px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px));
  background: rgba(var(--glass-ui-color-rgb, 255,255,255), calc(var(--glass-opacity, 0.13) * 1.5 + 0.05)) !important;
  border-color: rgba(var(--glass-ui-color-rgb, 255,255,255), calc(var(--glass-border-opacity, 0.28) * 1.2)) !important;
}

body.theme-glass .monthly-stats,
body.theme-glass .stat-cell {
  backdrop-filter: blur(var(--glass-blur, 16px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px));
  background: rgba(var(--glass-ui-color-rgb, 255,255,255), calc(var(--glass-opacity, 0.13) * 1.5 + 0.05));
  border-color: rgba(var(--glass-ui-color-rgb, 255,255,255), calc(var(--glass-border-opacity, 0.28) * 1.1));
}

body.theme-glass .toggle-group {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.25);
}

body.theme-glass .btn-outline {
  backdrop-filter: blur(calc(var(--glass-blur, 16px) * 0.5));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur, 16px) * 0.5));
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), calc(var(--glass-opacity, 0.13) * 1.5 + 0.05));
  border-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), calc(var(--glass-border-opacity, 0.28) * 1.5));
  color: var(--glass-ui-text);
}
body.theme-glass .btn-outline:hover {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.45);
  border-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.6);
}

body.theme-glass .input {
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(calc(var(--glass-saturation, 1.4) * 120%));
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(calc(var(--glass-saturation, 1.4) * 120%));
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), calc(var(--glass-opacity, 0.13) * 2 + 0.2));
  border: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), calc(var(--glass-border-opacity, 0.28) * 1.2));
  color: var(--text-primary);
  box-shadow: inset 0 1px 3px rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.6);
}
body.theme-glass .input:focus {
  border-color: var(--teal);
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.55);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12), inset 0 1px 3px rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.8);
}

body.theme-glass .nav-btn.active {
  background: rgba(var(--glass-color-rgb, 255, 255, 255), 0.55);
  box-shadow: inset 0 0 12px rgba(var(--glass-color-rgb, 255, 255, 255), 0.6);
}

/* 文字與標題：使用動態變數，配合各分組独立變色解決衝突 */
body.theme-glass h2, body.theme-glass h3,
body.theme-glass strong, body.theme-glass .fw {
  color: var(--glass-ui-text);
  text-shadow: var(--glass-ui-text-shadow, none);
  font-weight: 700;
}

/* 框架層內的標題覆寫：連動 --glass-text */
body.theme-glass .sidebar h2, body.theme-glass .sidebar h3,
body.theme-glass .topbar h2, body.theme-glass .topbar h3,
body.theme-glass .page-header-pill h2, body.theme-glass .page-header-pill h3 {
  color: var(--glass-text) !important;
  text-shadow: var(--glass-text-shadow, none) !important;
}

/* 輔助文字：預設跟隨 UI 層變數，在框架層內由上一層触影覆寫 */
body.theme-glass .text-gray,
body.theme-glass .label,
body.theme-glass .subtitle {
  color: var(--glass-ui-text);
  opacity: 0.7;
}

/* 框架層內的輔助文字：連動框架層變數 */
body.theme-glass .page-header-pill .subtitle,
body.theme-glass .page-header-pill .page-subtitle,
body.theme-glass .page-header-pill .text-gray,
body.theme-glass .page-header-pill .label {
  color: var(--glass-text) !important;
  opacity: 0.75;
}

body.theme-glass .text-teal,
body.theme-glass .text-blue,
body.theme-glass .text-purple { color: #0891b2 !important; }
body.theme-glass .text-red { color: #dc2626 !important; }
body.theme-glass .text-indigo { color: #4338ca !important; }
body.theme-glass .text-amber { color: #d97706 !important; }

body.theme-glass .icon-box.teal,
body.theme-glass .icon-box.blue,
body.theme-glass .icon-box.rose,
body.theme-glass .icon-box.purple,
body.theme-glass .icon-box.amber,
body.theme-glass .icon-box.caramel { 
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.45) !important;
  border: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.55);
  box-shadow: inset 0 1px 1px rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.3);
}


body.theme-glass .icon-box.teal { color: #0891b2; }
body.theme-glass .icon-box.blue { color: #2563eb; }
body.theme-glass .icon-box.rose { color: #e11d48; }
body.theme-glass .icon-box.purple { color: #7c3aed; }
body.theme-glass .icon-box.amber { color: #d97706; }
body.theme-glass .icon-box.caramel { color: var(--caramel); }

body.theme-glass .big-num { 
  color: var(--glass-ui-text) !important; 
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 進度環文字對比度提升 — 強制跟隨 UI 內容層色調 */
body.theme-glass .fintech-ring-card p[style*="color:var(--text,#1e293b)"],
body.theme-glass .fintech-ring-card p {
  color: var(--glass-ui-text) !important;
  text-shadow: var(--glass-ui-text-shadow, none) !important;
}

/* 表格專用樣式 - 深色文字，白磨砂背景確保可讀 */
body.theme-glass .tx-table thead th {
  background: rgba(255, 255, 255, 0.25);
  color: var(--glass-ui-text) !important;
  border-bottom: 2px solid var(--glass-ui-border-color, rgba(255, 255, 255, 0.5));
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 600;
}
body.theme-glass .tx-table tbody td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--text-primary);
  padding: 16px;
  font-size: 14px;
}
body.theme-glass .tx-table .row-alt td {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.15);
}
body.theme-glass .tx-table .tx-row-click:hover td {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.35);
  color: var(--text-primary);
}

/* 年度表格 */
body.theme-glass .yearly-table thead th {
  position: sticky;
  top: 0;
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.95) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--glass-ui-text);
  z-index: 30 !important;
  border-bottom: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.3) !important;
}
body.theme-glass .yearly-table thead th.sticky-col {
  z-index: 40 !important;
  left: 0;
}
body.theme-glass .yearly-table td {
  border-bottom-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.1);
  color: var(--glass-ui-text);
}
body.theme-glass .sticky-col {
  position: sticky;
  left: 0;
  background: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 20 !important;
  box-shadow: 4px 0 12px rgba(0,0,0,0.1);
}
body.theme-glass .section-header-row.teal td {
  background: rgba(125, 211, 252, 0.1);
  color: var(--teal);
  border-color: rgba(125, 211, 252, 0.15);
}
body.theme-glass .section-header-row.rose td {
  background: rgba(253, 164, 175, 0.1);
  color: var(--rose);
  border-color: rgba(253, 164, 175, 0.15);
}
body.theme-glass .section-header-row.amber td {
  background: rgba(252, 211, 77, 0.1);
  color: var(--amber);
  border-color: rgba(252, 211, 77, 0.15);
}

/* ── 系統設定手風琴適配 ── */
body.theme-glass .sa-group {
  background: rgba(var(--glass-color-rgb, 255, 255, 255), 0.35) !important; 
  backdrop-filter: blur(var(--glass-blur, 32px)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 32px)) saturate(140%);
  border: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.5) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.85);
  border-radius: 24px;
}

/* 強制所有子容器透明，避免疊加產生的不透明感 */
body.theme-glass .sa-item,
body.theme-glass .sa-body,
body.theme-glass .sa-inner,
body.theme-glass .sa-sub-item,
body.theme-glass .sa-sub-header,
body.theme-glass .sa-sub-body,
body.theme-glass .account-edit-row {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── 修正：玻璃模式黑色調時，風琴子層文字與圖示強制繼承對比色 ── */
body.theme-glass .sa-sub-body,
body.theme-glass .sa-sub-body * {
  color: var(--glass-ui-text) !important;
}
/* 例外：保留紅/綠金額色彩 */
body.theme-glass .sa-sub-body .text-danger,
body.theme-glass .sa-sub-body .text-success,
body.theme-glass .sa-sub-body .text-teal,
body.theme-glass .sa-sub-body .text-red {
  color: inherit !important;
}
/* sa-sub-header 文字 */
body.theme-glass .sa-sub-header span,
body.theme-glass .sa-sub-header div,
body.theme-glass .sa-sub-header .fw,
body.theme-glass .sa-sub-header .sa-sub-chevron {
  color: var(--glass-ui-text) !important;
  text-shadow: var(--glass-ui-text-shadow, none) !important;
}
/* sa-body 內的文字（第一層展開後）*/
body.theme-glass .sa-body .fw,
body.theme-glass .sa-body span:not(.text-danger):not(.text-success):not(.text-teal):not(.text-red),
body.theme-glass .sa-body .text-sm,
body.theme-glass .sa-body .text-gray {
  color: var(--glass-ui-text) !important;
}
/* badge 在暗色玻璃下需要對比 */
body.theme-glass .sa-sub-header .badge,
body.theme-glass .sa-sub-body .badge {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.18) !important;
  color: var(--glass-ui-text) !important;
  border-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.3) !important;
}
/* account-edit-row 內的文字 */
body.theme-glass .account-edit-row span,
body.theme-glass .account-edit-row .fw,
body.theme-glass .account-edit-row .text-sm,
body.theme-glass .account-edit-row .text-gray,
body.theme-glass .account-edit-row label {
  color: var(--glass-ui-text) !important;
}
/* sa-sub-footer 內的文字（尚無次類別 等提示）*/
body.theme-glass .sa-sub-footer .text-sm,
body.theme-glass .sa-sub-footer .text-gray {
  color: var(--glass-ui-text) !important;
  opacity: 0.65;
}

body.theme-glass .sa-header {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.1) !important;
  color: var(--glass-ui-text) !important;
  border-bottom: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.3);
}

body.theme-glass .sa-header .fw,
body.theme-glass .sa-header p,
body.theme-glass .sa-header span:not(.sa-chevron),
body.theme-glass .sa-header div {
  color: var(--glass-ui-text) !important;
  text-shadow: var(--glass-ui-text-shadow, none) !important;
}

body.theme-glass .sa-header .text-gray,
body.theme-glass .sa-header .text-sm {
  color: var(--glass-ui-text) !important;
  opacity: 0.65;
}

body.theme-glass .sa-header:hover {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.25) !important;
}

body.theme-glass .sa-chevron {
  color: var(--glass-ui-text) !important;
  opacity: 0.65;
}

body.theme-glass .sa-inner {
  border: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.2) !important;
  border-radius: 12px;
  margin: 10px;
}

body.theme-glass .sa-sub-item {
  border-bottom: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.1) !important;
}

body.theme-glass .sa-sub-header:hover {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.15) !important;
}

body.theme-glass .account-edit-row {
  border-bottom-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.1) !important;
}

body.theme-glass .account-edit-row:hover {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.08) !important;
}

body.theme-glass .cat-tag {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.25);
  border-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.4);
  color: var(--glass-ui-text) !important;
}

body.theme-glass .sa-add-row {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.15) !important;
  border: 1px dashed rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.3);
}

body.theme-glass .sa-sub-footer {
  border-top-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.2);
}

body.theme-glass .info-box {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.1);
  border-left-color: var(--teal);
  color: var(--text-secondary);
}

/* 修正下拉選單在玻璃模式下的箭頭與背景 */
body.theme-glass select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(15, 23, 42, 0.5)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-position: right 0.7rem center;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-right: 2.5rem;
  appearance: none;
}

body.theme-glass option {
  background: #f8fafc; /* 下拉選項無法完全透明，使用淺色背景確保可讀性 */
  color: #1e293b;
}

body.theme-glass .sa-sub-header:hover {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.28);
}


/* 徽章 */
body.theme-glass .badge.teal {
  background: rgba(8, 145, 178, 0.12);
  color: var(--teal);
}
body.theme-glass .badge.gray {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}
body.theme-glass .badge.dark {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
}
body.theme-glass .badge.indigo {
  background: rgba(67, 56, 202, 0.10);
  color: var(--indigo);
  border-color: rgba(67, 56, 202, 0.15);
}
body.theme-glass .badge.amber {
  background: rgba(217, 119, 6, 0.10);
  color: var(--amber);
  border-color: rgba(217, 119, 6, 0.15);
}

/* 按鈕 */
body.theme-glass .btn-primary {
  background: rgba(22, 163, 74, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.2);
}
body.theme-glass .btn-primary:hover {
  background: rgba(22, 163, 74, 1.0);
}

body.theme-glass .btn-add {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.3), rgba(8, 145, 178, 0.15));
  backdrop-filter: blur(12px);
  color: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(8, 145, 178, 0.3);
  transition: all 0.3s ease;
}
body.theme-glass .btn-add:hover {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.5), rgba(8, 145, 178, 0.3));
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(8, 145, 178, 0.2);
}

/* 側邊欄選項 */
body.theme-glass .owner-select {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.35);
  border-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.45);
  color: var(--text-primary);
}

/* 資產負債表 */
body.theme-glass .bs-total {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.25);
}

/* 進度環卡片 — 使用 UI 內容層獨立材質變數 */
body.theme-glass .fintech-ring-card {
  background: var(--glass-ui-bg, rgba(255, 255, 255, 0.28));
  border-color: var(--glass-ui-border-color, rgba(255, 255, 255, 0.4));
  backdrop-filter: var(--glass-ui-filter, blur(12px));
  -webkit-backdrop-filter: var(--glass-ui-filter, blur(12px));
  box-shadow: var(--glass-ui-shadow, 0 8px 24px rgba(0,0,0,0.1));
  overflow: visible !important;
}
body.theme-glass .fintech-ring-card::before {
  background: var(--glass-ui-highlight-horz, linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 100%));
}

/* 彈窗遮罩 */
body.theme-stardust .modal-overlay {
  background: rgba(10, 15, 25, 0.7);
  backdrop-filter: blur(4px);
}
body.theme-glass .modal-overlay {
  background: rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
}
body.theme-glass .modal-box {
  background: rgba(var(--glass-color-rgb, 255, 255, 255), 0.7) !important;
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid rgba(var(--glass-color-rgb, 255, 255, 255), 0.55);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
}
body.theme-glass .modal-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
  color: var(--text-primary);
}
body.theme-glass .modal-footer {
  background: rgba(var(--glass-color-rgb, 255, 255, 255), 0.2);
  border-top-color: rgba(15, 23, 42, 0.08);
}

/* 星塵瀑布 彈窗樣式 (改為深色磨砂感) */
body.theme-stardust .modal-box {
  background: rgba(26, 38, 52, 0.85) !important;
  backdrop-filter: blur(25px) saturate(160%);
  -webkit-backdrop-filter: blur(25px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: 0 12px 64px rgba(0, 0, 0, 0.5);
}
body.theme-stardust .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
body.theme-stardust .modal-footer {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-stardust .theme-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
body.theme-stardust .theme-name {
  color: #ffffff;
}
body.theme-stardust .theme-card.active {
  border-color: var(--teal);
  box-shadow: 0 0 15px rgba(29, 242, 221, 0.2);
}

/* 預設 (薄荷森林) 彈窗細節 */
body:not(.theme-glass):not(.theme-stardust):not([class*="theme-morand"]) .modal-box {
  background: #f0fdfa !important; /* 淺薄荷色 */
  border: 1px solid var(--teal-light);
  box-shadow: 0 12px 48px rgba(0,0,0,0.14);
}
/* ── 莫蘭迪主題：modal-header 用 c1（最淺）作背景，c3 作文字 ─── */
body.theme-morand-1 .modal-header { background: #E4D7C6; border-bottom: 1px solid #D8C6AD; color: #4A2E22; }
body.theme-morand-2 .modal-header { background: #D7DFD1; border-bottom: 1px solid #C6D0BD; color: #445038; }
body.theme-morand-3 .modal-header { background: #EBE6D7; border-bottom: 1px solid #E3DBC6; color: #5A5044; }
body.theme-morand-4 .modal-header { background: #F0E6D1; border-bottom: 1px solid #E9DBBD; color: #7A4E2E; }
body.theme-morand-5 .modal-header { background: #CDD7DD; border-bottom: 1px solid #B6C6CE; color: #304858; }
body.theme-morand-6 .modal-header { background: #E9E6E2; border-bottom: 1px solid #E0DBD6; color: #585048; }
body.theme-morand-7 .modal-header { background: #EDE2CD; border-bottom: 1px solid #E5D6B6; color: #785028; }
body.theme-morand-8 .modal-header { background: #E6D7D0; border-bottom: 1px solid #DBC6BC; color: #5C3030; }
body.theme-morand-9 .modal-header { background: #E2E2E1; border-bottom: 1px solid #D6D6D4; color: #505050; }
/* modal-box 整體也要用 c1 卡片色，不能純白 */
body.theme-morand-1 .modal-box { background: #E4D7C6; }
body.theme-morand-2 .modal-box { background: #D7DFD1; }
body.theme-morand-3 .modal-box { background: #EBE6D7; }
body.theme-morand-4 .modal-box { background: #F0E6D1; }
body.theme-morand-5 .modal-box { background: #CDD7DD; }
body.theme-morand-6 .modal-box { background: #E9E6E2; }
body.theme-morand-7 .modal-box { background: #EDE2CD; }
body.theme-morand-8 .modal-box { background: #E6D7D0; }
body.theme-morand-9 .modal-box { background: #E2E2E1; }
/* table header in modals: use c2 (sidebar color) */
body.theme-morand-1 .modal-box thead th { background: #7A4E3A; color: rgba(228,215,198,0.85); }
body.theme-morand-2 .modal-box thead th { background: #6A7A5E; color: rgba(215,223,209,0.85); }
body.theme-morand-3 .modal-box thead th { background: #8A7E62; color: rgba(235,230,215,0.85); }
body.theme-morand-4 .modal-box thead th { background: #B8845A; color: rgba(240,230,209,0.85); }
body.theme-morand-5 .modal-box thead th { background: #506878; color: rgba(205,215,221,0.85); }
body.theme-morand-6 .modal-box thead th { background: #847870; color: rgba(233,230,226,0.85); }
body.theme-morand-7 .modal-box thead th { background: #B08040; color: rgba(237,226,205,0.85); }
body.theme-morand-8 .modal-box thead th { background: #8A5848; color: rgba(230,215,208,0.85); }
body.theme-morand-9 .modal-box thead th { background: #808080; color: rgba(226,226,225,0.85); }
/* theme-card in morand */
[class*="theme-morand"] .theme-card { background: var(--white); border: 1px solid var(--gray-200); }

/* 主題選擇卡 */
body.theme-glass .theme-card {
  border-color: rgba(var(--glass-color-rgb, 255, 255, 255), 0.15);
  background: rgba(var(--glass-color-rgb, 255, 255, 255), 0.05);
}
body.theme-glass .theme-card:hover {
  border-color: var(--teal);
}
body.theme-glass .theme-card.active {
  border-color: var(--teal);
  background: rgba(var(--glass-color-rgb, 255,255,255), 0.15);
  box-shadow: 0 0 15px rgba(125, 211, 252, 0.3);
}
body.theme-glass .theme-name {
  color: #ffffff;
}


/* ── 修正 1: Logo 移至主畫面區域 (全主題套用) ── */
/* 桌面版隱藏側邊欄 Logo，改用內容區域內的 inline-logo */
.sidebar .sidebar-logo {
  display: none;
}

.inline-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.inline-logo img {
  max-height: 58px;
  width: auto;
  object-fit: contain;
  transition: filter 0.3s ease;
}

/* 針對不同主題調整 Logo 顏色（inline-logo img = 頁面頂部家徽） */
/* 磨砂玻璃: 強制純白 */
body.theme-glass .inline-logo img {
  filter: var(--glass-ui-logo-filter, brightness(0) invert(100%));
}
/*
 * 莫蘭迪各主題：logo 染成 c3（中深色）
 * c3 = 頁面主文字 / nav-tooltip 底色（--gray-800）= 和「系統設定」四字同色調
 */
body[class*="theme-morand"] .inline-logo img {
  filter: url(#recolor-filter) !important;
}

/* ── Glass Pill Header Container ──────────────────────────── */
.page-header-pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 24px 10px 16px;
  margin: 0 0 16px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1.5px 0 rgba(255,255,255,0.8) inset;
  gap: 12px;
  flex-wrap: nowrap;
  overflow: visible;
  position: relative; /* NOTE: 確保下拉年度選單等子元素不會被下方內容遮擋 */
  z-index: 100;
  
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  min-height: 86px;
}

/* 置中導航或滿版數據需求的特殊 header-pill，維持 100% 寬度 */
.year-header-pill,
.monthly-header-pill {
  width: 100% !important;
  align-self: stretch !important;
  justify-content: space-between !important;
}




body.theme-stardust .page-header-pill {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 4px 24px rgba(66,98,140,0.15), 0 1.5px 0 rgba(255,255,255,0.45) inset;
}

/* Monthly page pill: allow dropdown to overflow */
.monthly-header-pill {
  overflow: visible;
}

/* 標題文字與 Logo 排列 */
/* ── Unified Page Header Bar ──────────────────────────────── */
.page-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  flex-shrink: 0;
}

.page-header-bar--inline {
  padding: 0;
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}

.year-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  min-width: 180px;
}

.year-networth-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.year-networth-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #888);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

.year-networth-value {
  font-size: 28px;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: var(--bg-sidebar);
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

body.theme-glass .year-networth-label { color: var(--glass-text-sub, rgba(15, 23, 42, 0.65)) !important; }
body.theme-glass .year-networth-value { color: var(--glass-text) !important; text-shadow: var(--glass-text-shadow, none) !important; }
body.theme-stardust .year-networth-value { color: var(--bg-sidebar) !important; }

.page-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.page-header-text h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.5px;
  white-space: nowrap;
  line-height: 1;
}

.page-subtitle {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
  white-space: nowrap;
}

/* theme color for h2 */
body.theme-glass .page-header-text h2 {
  color: var(--glass-text) !important;
  text-shadow: var(--glass-text-shadow, none) !important;
}
body:not(.theme-glass):not(.theme-stardust) .page-header-text h2 {
  color: var(--teal-dark);
}
body.theme-stardust .page-header-text h2 {
  color: #42628C;
}

/* legacy .page-title — keep flex so old refs don't break */
.page-title {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
}
.page-title h2, .month-nav h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.5px;
  white-space: nowrap;
  line-height: 1;
}
.monthly-header .month-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 標題文字移右避免擋到 logo */
.page-content h2, 
.section-header h2,
.balance-header h2,
.monthly-header h2 {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 標題主題色適配 */
/* 預設 (薄荷森林): 使用工具列底色綠 */
body:not(.theme-glass):not(.theme-stardust) .page-title h2,
body:not(.theme-glass):not(.theme-stardust) .month-nav h2,
body:not(.theme-glass):not(.theme-stardust) .nw-header h2,
body:not(.theme-glass):not(.theme-stardust) .inv-header h2 {
  color: var(--teal-dark) !important;
}

/* 星塵瀑布: 使用工具列底色藍 */
body.theme-stardust .page-title h2,
body.theme-stardust .month-nav h2,
body.theme-stardust .nw-header h2,
body.theme-stardust .inv-header h2 {
  color: #42628C !important;
}

/* ── 修正 2: Tooltip 改為深色玻璃，z-index 提高 ── */
body.theme-glass .nav-tooltip {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 99999;
  pointer-events: none;
  overflow: visible;
}
body.theme-glass .nav-tooltip::before {
  border-right-color: rgba(15, 23, 42, 0.9);
}

/* ── 修正 3: 下拉選單改為深色藍灰玻璃 ── */
body.theme-glass .dropdown {
  background: rgba(22, 24, 30, 0.88); /* 深灰磨砂 */
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  z-index: 9999 !important;
}
/* 修正磨砂主題選單被擋住的問題 */
body.theme-glass .stat-cell.relative {
  overflow: visible !important;
  z-index: 100;
}
body.theme-glass .monthly-stats {
  z-index: 100;
}
body.theme-glass .dropdown-item {
  color: rgba(255, 255, 255, 0.9);
}
body.theme-glass .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
body.theme-glass .dropdown-item.text-red {
  color: var(--rose);
}
body.theme-glass .dropdown-item.text-red:hover {
  background: rgba(253, 164, 175, 0.15);
}
body.theme-glass .dropdown-sep {
  border-top-color: rgba(15, 23, 42, 0.08);
}

/* ── 修正 4: 通用表格 → 深色文字，適合白磨砂 ── */
body.theme-glass table thead th {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.35) !important;
  color: var(--glass-ui-text) !important;
  border-bottom: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.45);
}
body.theme-glass table tbody td {
  color: var(--glass-ui-text, rgba(15, 23, 42, 0.88));
  border-bottom-color: rgba(var(--glass-ui-color-rgb, 15, 23, 42), 0.06);
}
body.theme-glass table tbody tr:hover td {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.35);
}
/* 淨資產表格的 sticky header 與切換列 */
body.theme-glass .nw-toggle-row,
body.theme-glass [style*="background:#fff"],
body.theme-glass [style*="background: #fff"],
body.theme-glass [style*="background:white"],
body.theme-glass [style*="background: white"] {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.45) !important;
  color: var(--glass-ui-text) !important;
}

/* ── 修正 import-row hover：玻璃主題下 hover 不蓋掉文字 ──
   不用 glass-ui-color-rgb（fallback=255，黑玻背景圖暗但變數仍是白色）
   改用 teal 淡化色：任何玻璃深淺皆可讀 ── */
body.theme-glass #import-main-table .import-row:hover td {
  background: rgba(8, 145, 178, 0.12) !important;
  color: var(--glass-ui-text) !important;
}
/* 覆蓋通用 table hover 避免被 1580 行規則蓋回去 */
body.theme-glass #import-main-table tbody tr:hover td {
  background: rgba(8, 145, 178, 0.12) !important;
  color: var(--glass-ui-text) !important;
}
/* 匯入表格 edit pencil SVG icon 顏色隨主題調整 */
body.theme-glass .imp-edit-icon {
  color: var(--glass-ui-text);
  opacity: 0.6;
}
body.theme-glass .import-row:hover .imp-edit-icon {
  opacity: 1;
  color: var(--teal, #0891b2);
}

/* ── 修正 5: 連結與強調色 → 深藍 ── */
body.theme-glass .text-blue,
body.theme-glass a[style*="color:#0ea5e9"],
body.theme-glass a[style*="color: #0ea5e9"],
body.theme-glass [style*="color:#0369a1"],
body.theme-glass [style*="color: #0369a1"] {
  color: #0369a1 !important;
}
body.theme-glass a {
  color: #0891b2;
}

/* ── 修正 6: info-box 資訊框改為亮色玻璃風格 ── */
body.theme-glass .info-box {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(8, 145, 178, 0.25);
  color: rgba(15, 23, 42, 0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
body.theme-glass .info-box a {
  color: #0891b2;
}

/* ── 其他行內樣式覆蓋 → 亮白玻璃 ── */
body.theme-glass [style*="background:#f9fafb"],
body.theme-glass [style*="background: #f9fafb"],
body.theme-glass [style*="background:#f3f4f6"],
body.theme-glass [style*="background: #f3f4f6"],
body.theme-glass [style*="background-color:#f9fafb"],
body.theme-glass [style*="background-color: #f9fafb"] {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.35) !important;
}

body.theme-glass select {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.45);
  border-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.5);
  color: var(--text-primary);
}
body.theme-glass select option {
  background: #f8fafc;
  color: rgba(15, 23, 42, 0.9);
}

/* 篩選彈窗玻璃化 */
body.theme-glass .filter-box {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.75) !important;
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.55);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10);
  border-radius: 18px;
}
body.theme-glass .filter-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--text-primary);
}
body.theme-glass .filter-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}


.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 8px 0; }
.theme-card { border: 2px solid var(--gray-100); border-radius: 16px; padding: 16px; cursor: pointer; transition: all 0.2s; text-align: center; }
.theme-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.theme-card.active { border-color: var(--teal); background: var(--teal-light); }
.theme-preview { height: 48px; border-radius: 10px; margin-bottom: 12px; display: flex; overflow: hidden; border: 1px solid rgba(0,0,0,0.05); }
.theme-preview span { flex: 1; }
.theme-name { font-weight: 800; font-size: 14px; color: var(--gray-800); }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, 'Helvetica Neue', sans-serif; background: var(--bg-main); color: var(--gray-800); font-size: 14px; transition: background 0.3s; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Layout ─────────────────────────────────────────────────── */
.app-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border: 1px solid var(--gray-200);
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  position: fixed; 
  top: 50%; left: 16px; 
  transform: translateY(-50%);
  height: auto;
  max-height: calc(100vh - 32px);
  z-index: 100; transition: all .25s;
  padding: 16px 0;
  border-radius: 20px;
  overflow: visible;
}

.main-area { margin-left: calc(var(--sidebar-w) + 16px); flex: 1; }

.page-content { padding: 16px 16px 32px; }

/* ④ Default 主題：圓角容器，對標 Glass 效果 */
body:not(.theme-glass):not(.theme-stardust) .page-content {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  margin: 16px 96px 16px 28px;
  padding: 24px 32px 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1.5px 0 rgba(255,255,255,0.9) inset;
  width: calc(100% - 124px);
  /* max-width removed: was causing ghost frame on right side */
}

/* ④ Stardust 主題：圓角容器，深藍冷色系 */
body.theme-stardust .page-content {
  background: rgba(238, 242, 255, 0.80);
  border-radius: 28px;
  margin: 16px 96px 16px 28px;
  padding: 24px 32px 32px;
  border: 1.5px solid rgba(86, 132, 191, 0.25);
  box-shadow: 0 4px 24px rgba(66, 98, 140, 0.12), 0 1.5px 0 rgba(255,255,255,0.7) inset;
  width: calc(100% - 124px);
  /* max-width removed: was causing ghost frame on right side */
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar-logo {
  padding: 12px 0 8px;
  display: flex; align-items: center; justify-content: center;
  width: auto;
}
.logo-dot {
  width: 48px; height: 48px; background: transparent; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.logo-img-real {
  width: auto; height: 100%; max-height: 44px; object-fit: contain;
}
.logo-text { display: none; }

.sidebar-nav {
  padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%;
  overflow: visible;
}
.nav-section-label { display: none; }

.nav-btn {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  color: var(--sidebar-text);
  transition: background .15s, color .15s;
  margin: 0;
  overflow: visible;
  flex-shrink: 0;
}
.nav-btn:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-hover);
}
.nav-btn.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-active);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.nav-btn .nav-icon { display: none; }

.nav-svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: block;
}
body.theme-glass .nav-svg {
  filter: var(--glass-icon-filter, none);
}

/* Tooltip */
.nav-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%; transform: translateY(-50%);
  background: var(--gray-800);
  color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.nav-tooltip::before {
  content: '';
  position: absolute;
  right: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--gray-800);
}
.nav-btn:hover .nav-tooltip {
  opacity: 1;
}

/* Sidebar bottom */
.btn-add {
  width: calc(100% - 16px); padding: 12px; background: var(--btn-primary-bg); color: var(--btn-primary-text);
  border-radius: 12px; font-weight: 900; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin-bottom: 12px;
  transition: background .15s;
}
.btn-add:hover { background: var(--teal-dark); }

/* Sidebar bottom */
.sidebar-bottom {
  padding: 8px 0 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%;
}
.sidebar-bottom .btn-add {
  display: none; /* 隱藏側邊欄新增按鈕 */
}
.btn-add:hover { background: var(--teal-dark); transform: scale(1.06); }
.btn-add::after {
  content: '新增紀錄';
  position: absolute;
  left: calc(100% + 12px);
  top: 50%; transform: translateY(-50%);
  background: var(--gray-800); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 7px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.btn-add::before {
  content: '';
  position: absolute;
  left: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--gray-800);
  opacity: 0; transition: opacity .15s;
  z-index: 999;
}
.btn-add:hover::after, .btn-add:hover::before { opacity: 1; }

.owner-selector { position: relative; }
.owner-label { display: none; }
.owner-selector {
  width: calc(100% - 8px);
  margin-bottom: 12px;
  padding: 0 4px;
}
.owner-select {
  width: 100%; height: 36px; padding: 0 2px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 10px;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9);
  appearance: none; cursor: pointer; text-align: center;
  background-image: none;
  transition: background .15s, color .15s, border-color .15s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.owner-select:hover { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.35); }
.owner-select option { background: var(--gray-800); color: #fff; font-size: 12px; }

.api-status-bar {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); margin: 2px auto 0;
  position: relative;
}
.api-status-bar.api-online { background: var(--teal); }
.status-dot { display: none; }
.api-status-bar span:not(.status-dot) { display: none; }


/* ── Hamburger (mobile) ──────────────────────────────────────── */
.topbar { display: none; background: var(--bg-sidebar); border-bottom: 1px solid var(--gray-200); padding: 12px 16px; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; transition: background 0.3s; }
.hamburger { width: 36px; height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--gray-700); border-radius: 2px; }

/* ── Page Sections ─────────────────────────────────────────── */
.page-section { }

/* ── 設定頁 sticky 標題列 ── */
.settings-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: 16px;
  /* 背景需明確設定，否則sticky時下方內容透出 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 各主題下對應page-content背景色，確保sticky header不透明 */
body:not(.theme-glass):not(.theme-stardust):not(.theme-handdrawn-pencil):not(.theme-handdrawn-crayon) .settings-sticky-header {
  background: rgba(235, 237, 242, 0.97) !important;
}
body.theme-stardust .settings-sticky-header {
  background: rgba(238, 242, 255, 0.97) !important;
}
body.theme-handdrawn-pencil .settings-sticky-header {
  background: rgba(250, 249, 245, 0.97) !important;
}
body.theme-handdrawn-crayon .settings-sticky-header {
  background: rgba(255, 253, 246, 0.97) !important;
}
body.theme-glass .settings-sticky-header {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.subtitle { font-size: 11px; font-weight: 800; color: var(--gray-400); text-transform: uppercase; letter-spacing: .15em; margin-top: 4px; }
.bs-outer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; margin-bottom: 4px; border-radius: 10px;
  background: var(--white); border: 1px solid var(--gray-100);
  cursor: pointer; transition: all 0.2s;
}
.bs-outer-header:hover { background: var(--gray-50); }

.bs-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; border-radius: 10px; margin-top: 6px;
  background: var(--gray-100); font-weight: 800; font-size: 14px;
}

body.theme-glass .bs-outer-header {
  background: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.12); 
  backdrop-filter: blur(var(--glass-secondary-blur));
  -webkit-backdrop-filter: blur(var(--glass-secondary-blur));
  border: 1px solid rgba(var(--glass-ui-color-rgb, 255,255,255), 0.15);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
}
body.theme-glass .bs-outer-header:hover {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.18);
}

body.theme-glass .bs-total {
  background: var(--glass-heavy-bg);
  backdrop-filter: blur(var(--glass-heavy-blur));
  -webkit-backdrop-filter: blur(var(--glass-heavy-blur));
  border: var(--glass-heavy-border);
  box-shadow: var(--glass-heavy-shadow);
  color: var(--text-primary);
  margin-bottom: 8px;
}

body.theme-glass .bs-group {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.12) !important;
  border: var(--glass-surface-border) !important;
  backdrop-filter: blur(var(--glass-surface-blur)) !important;
}

.section-header { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 8px; }
.section-header h3 { font-size: 16px; font-weight: 900; }

/* ── Cards ─────────────────────────────────────────────────── */
.card { background: var(--white); border-radius: 16px; border: 1px solid var(--gray-100); box-shadow: var(--shadow); padding: 24px; }
/* Dashboard compact overrides */
.summary-grid .card { padding: 14px 18px; }
.card-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--gray-50); }
.card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--gray-100); }
.mb-lg { margin-bottom: 24px; }
.mb-md { margin-bottom: 16px; }
.mb-sm { margin-bottom: 8px; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 16px; }
.mt-xs { margin-top: 4px; }
.overflow-auto { overflow: auto; }

/* ── Grids ──────────────────────────────────────────────────── */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 10px; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.balance-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .balance-sheet-grid { grid-template-columns: 1fr; } }
.bs-col { display: flex; flex-direction: column; gap: 6px; }
.bs-group { padding: 10px 14px; box-shadow: none; border: 1px solid var(--gray-200); }
.bs-header { font-size: 13px; font-weight: 800; border-bottom: 2px solid currentColor; padding-bottom: 5px; margin-bottom: 4px; }
.bs-total { display: flex; justify-content: space-between; font-size: 13px; font-weight: 900; padding: 8px 12px; background: var(--gray-50); border-radius: 8px; }
.chart-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tx-modal-body { padding: 10px 14px 8px; }
.tx-modal-body .tx-compact-block { margin-bottom: 6px; }
.tx-modal-body .label { margin-bottom: 4px; font-size: 9px; letter-spacing: .08em; }
.tx-modal-body .input { padding: 7px 10px; font-size: 12px; border-radius: 8px; }
.tx-modal-body .input.sm { padding: 5px 8px; font-size: 12px; }
.tx-modal-body #tx-amount,
.tx-modal-body #tx-date,
.tx-modal-body #tx-title,
.tx-modal-body #tx-owner,
.tx-modal-body #tx-account,
.tx-modal-body #tx-to-account,
.tx-modal-body #tx-category,
.tx-modal-body #tx-subcategory,
.tx-modal-body #tx-pay-account {
  min-height: 34px;
}
.tx-grid-tight { gap: 8px; }
.tx-mode-toggle { display: flex; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; font-size: 12px; }
.tx-mode-toggle .budget-mode-btn { flex: 1 1 0; min-width: 0; padding: 7px 8px; font-size: 12px; line-height: 1.15; }
.tx-modal-body #budget-mode-toggle-group { margin-bottom: 6px; }
.tx-modal-body #pay-account-group p,
.tx-modal-body #fx-to-amount-group p { margin-top: 3px; line-height: 1.2; }
.tx-modal-body .form-group { margin-bottom: 6px; }
.tx-modal-footer { padding: 8px 14px; }
.tx-modal-footer .btn-text,
.tx-modal-footer .btn-danger,
.tx-modal-footer .btn-primary { padding-top: 8px; padding-bottom: 8px; font-size: 12px; }
.tx-modal-footer .btn-primary,
.tx-modal-footer .btn-danger { border-radius: 8px; }
.tx-modal-footer .flex-row.gap-sm { gap: 6px; }

/* ── Utility ────────────────────────────────────────────────── */
.flex-row { display: flex; align-items: center; }
.flex-1 { flex: 1; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-teal { color: var(--teal-dark); }
.text-blue { color: var(--blue); }
.text-red { color: var(--rose); }
.text-purple { color: var(--purple); }
.text-indigo { color: var(--indigo); }
.text-amber { color: var(--amber); }
.text-gray { color: var(--gray-400); }
.text-sm { font-size: 12px; }
.fw { font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; }
.trunc { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none !important; }
.pointer { cursor: pointer; }
.py-lg { padding: 48px 0; }

/* ── Icon Boxes ─────────────────────────────────────────────── */
.icon-box { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.icon-box.sm { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
.icon-box.teal { background: var(--teal-light); color: var(--teal-dark); }
.icon-box.blue { background: var(--blue-light); color: var(--blue); }
.icon-box.rose { background: var(--rose-light); color: var(--rose); }
.icon-box.purple { background: var(--purple-light); color: var(--purple); }
.icon-box.amber { background: var(--amber-light); color: var(--amber); }
.icon-box.caramel { background: var(--caramel-light); color: var(--caramel); }

/* ── Summary Card ───────────────────────────────────────────── */
.card.flex-row { display: flex; align-items: center; gap: 16px; }
.label { font-size: 10px; font-weight: 800; color: var(--gray-400); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.big-num { font-size: 20px; font-weight: 900; color: var(--gray-800); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 800; }
.badge.teal { background: var(--teal-light); color: var(--teal-dark); }
.badge.gray { background: var(--gray-100); color: var(--gray-500); }
.badge.dark { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); }
.badge.indigo { background: var(--indigo-light); color: var(--indigo); border: 1px solid #c7d2fe; }
.badge.amber { background: var(--amber-light); color: #92400e; border: 1px solid #fde68a; }
.badge.caramel { background: var(--caramel-light); color: var(--caramel); border: 1px solid #e5c1a7; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary { background: var(--teal); color: white; padding: 10px 20px; border-radius: 10px; font-weight: 800; font-size: 13px; transition: background .15s; box-shadow: 0 2px 8px rgba(20,184,166,.25); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-danger { background: var(--rose-light); color: var(--rose); padding: 10px 16px; border-radius: 10px; font-weight: 800; font-size: 13px; }
.btn-outline { background: white; border: 1px solid var(--gray-200); color: var(--gray-700); padding: 8px 16px; border-radius: 10px; font-weight: 700; font-size: 13px; transition: all .15s; }
.btn-outline:hover { border-color: var(--teal); color: var(--teal-dark); }
.btn-outline.active { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-light); }
.btn-outline.sm { padding: 6px 12px; font-size: 12px; }
.btn-text { background: none; color: var(--gray-500); font-weight: 700; padding: 8px 12px; font-size: 13px; }
.btn-text:hover { color: var(--gray-800); }
.btn-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gray-400); transition: background .15s, color .15s; }
.btn-icon:hover { background: var(--gray-100); color: var(--gray-700); }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Inputs ─────────────────────────────────────────────────── */
.input { width: 100%; padding: 9px 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--gray-800); outline: none; transition: border .15s; }
.input:focus { border-color: var(--teal); background: white; box-shadow: 0 0 0 3px rgba(20,184,166,.1); }
.input.sm { padding: 6px 10px; font-size: 12px; }
.form-group label { display: block; font-size: 10px; font-weight: 800; color: var(--gray-400); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.form-group { margin-bottom: 10px; }

/* ── Account List ───────────────────────────────────────────── */
.account-list { }
.account-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--gray-50); }
.account-row:last-child { border-bottom: none; }
.account-edit-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gray-50); }
.account-edit-row .input.sm { width: 100px; }
.empty-text { color: var(--gray-300); font-weight: 700; text-align: center; padding: 24px; }

/* ── Transaction Lists ──────────────────────────────────────── */
.tx-list { }
.tx-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-50); }
.tx-row:last-child { border-bottom: none; }
.type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.type-dot.inc { background: #10b981; }
.type-dot.exp { background: var(--rose); }
.type-dot.trans { background: var(--indigo); }

/* ── Monthly Page ───────────────────────────────────────────── */
.monthly-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-nav h2 { font-size: 28px; font-weight: 900; min-width: 160px; text-align: center; color: var(--text-primary); }
body.theme-glass .month-nav h2 {
  color: var(--glass-text) !important;
  text-shadow: var(--glass-text-shadow, none) !important;
}
.month-nav .btn-icon { font-size: 22px; width: 40px; height: 40px; }

/* ── Year Picker Dropdown ───────────────────────────────────── */
.monthly-year-clickable {
  cursor: pointer;
  border-radius: 8px;
  padding: 2px 6px;
  transition: background 0.15s, color 0.15s;
  display: inline-block;
}
.monthly-year-clickable:hover {
  background: var(--teal, #0d9488);
  color: #fff;
}
.monthly-year-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg, #fff);
  border: 1px solid var(--sep, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  z-index: 999;
  padding: 10px 8px;
  min-width: 140px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.monthly-year-picker-item {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  color: var(--text-primary, #111);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.monthly-year-picker-item:hover {
  background: var(--teal, #0d9488);
  color: #fff;
}
.monthly-year-picker-item.active {
  background: var(--teal, #0d9488);
  color: #fff;
}
/* Glass theme overrides */
body.theme-glass .page-header-pill {
  overflow: visible !important;
}
body.theme-glass .monthly-year-picker {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,0.3);
}
body.theme-glass .monthly-year-picker-item {
  color: var(--glass-text, #fff);
}
body.theme-glass .monthly-year-clickable:hover,
body.theme-glass .monthly-year-picker-item:hover,
body.theme-glass .monthly-year-picker-item.active {
  background: rgba(255,255,255,0.3);
  color: #fff;
}
/* Crayon theme overrides */
body.theme-handdrawn-crayon .monthly-year-picker {
  background: var(--cb-float, #FFF9E6) !important;
  border: 3px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 8px 12px / 10px 8px 12px 6px !important;
  box-shadow: 5px 5px 0px 0px var(--cb-ink, #1A1A1A) !important;
  font-family: 'Yusei Magic', 'Noto Sans TC', cursive, sans-serif !important;
  color: var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon .monthly-year-picker-item {
  color: var(--cb-ink, #1A1A1A) !important;
  font-family: 'Yusei Magic', 'Noto Sans TC', cursive, sans-serif !important;
  border: 2px solid transparent !important;
}
body.theme-handdrawn-crayon .monthly-year-picker-item:hover {
  background: rgba(253, 224, 71, 0.2) !important;
  border-color: var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 8px 12px / 10px 8px 12px 6px !important;
  color: var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon .monthly-year-picker-item.active {
  background: #3DB890 !important;
  color: #FBF2D0 !important;
  border-color: var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 8px 12px / 10px 8px 12px 6px !important;
}
/* Pencil theme overrides */
body.theme-handdrawn-pencil .monthly-year-picker {
  background: #FAF9F5 !important;
  border: 2px solid #2d3748 !important;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow: 4px 4px 0px #2d3748 !important;
  font-family: 'Zen Kurenaido', 'Noto Sans TC', cursive, sans-serif !important;
  color: #2d3748 !important;
}
body.theme-handdrawn-pencil .monthly-year-picker-item {
  color: #2d3748 !important;
  font-family: 'Zen Kurenaido', 'Noto Sans TC', cursive, sans-serif !important;
  border: 1.5px solid transparent !important;
}
body.theme-handdrawn-pencil .monthly-year-picker-item:hover {
  background: #F4F2E9 !important;
  border-color: #2d3748 !important;
  border-radius: 10px 4px 8px 5px / 5px 8px 4px 10px !important;
  color: #2d3748 !important;
}
body.theme-handdrawn-pencil .monthly-year-picker-item.active {
  background: #FAF2E9 !important;
  color: #2d3748 !important;
  border-color: #2d3748 !important;
  border-radius: 10px 4px 8px 5px / 5px 8px 4px 10px !important;
  font-weight: 900 !important;
}
.monthly-stats { display: flex; align-items: stretch; background: white; border: 1px solid var(--gray-100); border-radius: 14px; box-shadow: var(--shadow); }
.stat-cell { padding: 10px 20px; text-align: right; display: flex; flex-direction: column; justify-content: center; }
.stat-cell.border-r { border-right: 1px solid var(--gray-100); }
.stat-cell.relative { position: relative; padding: 8px; display: flex; align-items: center; }
.toggle-group { display: flex; background: var(--gray-100); padding: 4px; border-radius: 12px; width: fit-content; margin-bottom: 20px; }
.toggle-btn { padding: 8px 20px; border-radius: 10px; font-size: 13px; font-weight: 800; color: var(--gray-400); transition: all .15s; }
.toggle-btn.active-red { background: white; color: var(--rose); box-shadow: var(--shadow); }
.toggle-btn.active-teal { background: white; color: var(--teal-dark); box-shadow: var(--shadow); }

/* ── Donut Chart ────────────────────────────────────────────── */
.chart-card h3 { margin-bottom: 16px; font-size: 16px; font-weight: 900; }
.donut-container { display: flex; justify-content: center; }
.donut-svg { width: 200px; height: 200px; }
.donut-seg { cursor: pointer; transition: opacity .2s; }
.donut-seg:hover { opacity: .75; }
.donut-label-sm { font-size: 10px; fill: var(--gray-400); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.donut-label-lg { font-size: 20px; fill: var(--gray-800); font-weight: 900; }

/* ── Ranking ────────────────────────────────────────────────── */
.ranking-list { overflow-y: auto; max-height: 320px; }
.ranking-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Progress Bar ────────────────────────────────────────────── */
.progress-bar { width: 100%; height: 6px; background: var(--gray-100); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.progress-fill { height: 100%; border-radius: 99px; transition: width 1s ease; }

/* ── Table ──────────────────────────────────────────────────── */
.table-card { padding: 0; overflow: hidden; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--gray-100); }
.table-wrap { overflow: auto; max-height: 480px; }
.tx-table { width: 100%; border-collapse: collapse; }
.tx-table thead th { position: sticky; top: 0; background: var(--gray-50); padding: 12px 20px; font-size: 10px; font-weight: 800; color: var(--gray-400); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; border-bottom: 1px solid var(--gray-200); }
.tx-table th.sortable { cursor: pointer; user-select: none; }
.tx-table th.sortable:hover { color: var(--teal-dark); background: #f0fdf9; }
.tx-table tbody td { padding: 12px 20px; border-bottom: 1px solid var(--gray-50); white-space: nowrap; }
.tx-table .row-alt td { background: var(--gray-50); }
.tx-table .tx-row-click { cursor: pointer; transition: background .1s; }
.tx-table .tx-row-click:hover td { background: #f0fdf9; }
.sort-icon { font-size: 11px; }
.sort-icon.dim { opacity: .2; }

/* ── Dropdown ───────────────────────────────────────────────── */
.dropdown { position: absolute; right: 0; top: calc(100% + 4px); width: 200px; background: white; border: 1px solid var(--gray-100); border-radius: 12px; box-shadow: var(--shadow-md); overflow: hidden; z-index: 9999; }
.dropdown-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--gray-700); transition: background .1s; text-align: left; }
.dropdown-item:hover { background: var(--teal-light); color: var(--teal-dark); }
.dropdown-item.text-red { color: var(--rose); }
.dropdown-item.text-red:hover { background: var(--rose-light); }
.dropdown-sep { border: none; border-top: 1px solid var(--gray-100); margin: 4px 0; }

/* ── Filter Modal ───────────────────────────────────────────── */
.filter-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.filter-box { background: white; border-radius: 20px; width: 100%; max-width: 660px; box-shadow: var(--shadow-md); overflow: hidden; }
.filter-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--gray-100); font-weight: 800; }
.filter-body { padding: 16px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.filter-body .label { margin-top: 4px !important; margin-bottom: 2px; }
.filter-footer { display: flex; justify-content: space-between; padding: 12px 24px; background: var(--gray-50); border-top: 1px solid var(--gray-100); }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0,0,0,.4); backdrop-filter: blur(6px); }
.modal-box { background: white; border-radius: 20px; box-shadow: 0 20px 48px rgba(0,0,0,.2); width: 100%; overflow: hidden; display: flex; flex-direction: column; }
.modal-box.sm { max-width: 440px; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.modal-box.lg { max-width: 900px; max-height: 90vh; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--gray-100); flex-shrink: 0; }
.modal-header h3 { font-size: 18px; font-weight: 900; }
.modal-body { padding: 12px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: var(--gray-50); border-top: 1px solid var(--gray-100); flex-shrink: 0; }

/* ── Import Modal ───────────────────────────────────────────── */
.import-owner-bar { padding: 10px 24px; background: var(--teal-light); border-bottom: 1px solid var(--gray-200); font-size: 13px; font-weight: 800; color: var(--teal-dark); }
.dup-row { opacity: .4; background: var(--gray-50) !important; }

/* 匯入表格：全幅 fixed layout，字體放大，不橫拉 */
#import-main-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#import-main-table thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--gray-50);
  padding: 11px 14px;
  font-size: 13px; font-weight: 800;
  color: var(--gray-500);
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
  border-bottom: 1px solid var(--gray-200);
  overflow: visible;
}
#import-main-table tbody td {
  padding: 11px 14px;
  font-size: 15px;
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#import-main-table .import-row:hover td {
  background: var(--import-row-hover, #f0fdf9);
  color: var(--import-row-hover-text, inherit);
}
#import-main-table .dup-row td { opacity: .45; }
/* Edit pencil icon default */
.imp-edit-icon {
  color: var(--text-muted, rgba(15,23,42,0.45));
  transition: color 0.15s, opacity 0.15s, background 0.15s;
}
.import-row:hover .imp-edit-icon {
  color: var(--teal, #0891b2);
  background: rgba(8, 145, 178, 0.1) !important;
}
#import-table-wrap { overflow-y: auto; overflow-x: auto; }
#import-main-table {
  width: auto !important;
  min-width: 1050px;
  table-layout: fixed;
}
#hanton-import-table {
  width: auto !important;
  min-width: 700px;
  table-layout: fixed;
}

/* 欄標題可拖曳 */
.imp-resizable-th { position: relative; }
.imp-col-resizer {
  position: absolute;
  right: -4px; top: 0; bottom: 0;
  width: 8px;
  cursor: col-resize;
  user-select: none;
  z-index: 11;
  background: transparent;
}
.imp-col-resizer:hover,
.imp-col-resizer.dragging {
  background: var(--accent, #14b8a6);
  opacity: .8;
  border-radius: 2px;
}

/* ── Yearly Table ───────────────────────────────────────────── */
.yearly-table { 
  width: 100%; 
  border-collapse: separate; 
  border-spacing: 0; 
  min-width: 800px; 
}
.yearly-table thead th { 
  position: sticky; 
  top: 0; 
  background: var(--gray-50); 
  padding: 12px 16px; 
  font-size: 11px; 
  font-weight: 800; 
  color: var(--gray-400); 
  text-transform: uppercase; 
  letter-spacing: .1em; 
  white-space: nowrap; 
  border-bottom: 1px solid var(--gray-200);
  z-index: 30;
}
.yearly-table td { 
  padding: 10px 16px; 
  border-bottom: 1px solid var(--gray-50); 
}
.sticky-col { 
  position: sticky; 
  left: 0; 
  background: white; 
  z-index: 20; 
  box-shadow: 2px 0 5px rgba(0,0,0,0.05); 
}
.yearly-table thead th.sticky-col {
  z-index: 40;
}
.section-header-row td { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .2em; padding: 8px 16px; }
.section-header-row.teal td { background: #f0fdf9; color: var(--teal-dark); border-top: 1px solid #ccfbf1; border-bottom: 1px solid #ccfbf1; }
.section-header-row.rose td { background: #fff1f2; color: #be123c; border-top: 1px solid #ffe4e6; border-bottom: 1px solid #ffe4e6; }
.section-header-row.amber td { background: var(--amber-light); color: #92400e; border-top: 1px solid #fde68a; border-bottom: 1px solid #fde68a; }
.data-row:hover td { background: var(--gray-50); }

/* ── Category Tags ──────────────────────────────────────────── */
.cat-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cat-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--gray-100); color: var(--gray-700); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.cat-remove { color: var(--gray-400); font-size: 11px; padding: 0 2px; line-height: 1; }
.cat-remove:hover { color: var(--rose); }

/* ── Info Box ───────────────────────────────────────────────── */
.info-box { background: var(--blue-light); border: 1px solid #bae6fd; border-radius: 10px; padding: 12px 16px; font-size: 12px; color: #0369a1; line-height: 1.6; }
.info-box p { margin-bottom: 4px; }

/* ── Animation ──────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.anim-fade { animation: fadeIn .3s ease; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 8px 0 24px rgba(0,0,0,.15); }
  .main-area { margin-left: 0; }
  .topbar { display: flex; }
  .page-content { padding: 16px 16px 64px; }
  .chart-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: 1fr; }
  .monthly-header { flex-direction: column; align-items: flex-start; }
  .monthly-stats { width: 100%; }
  .modal-overlay { align-items: center; padding: 8px; }
  .modal-box { border-radius: 16px; }
  .modal-box.sm { max-width: 100%; max-height: calc(100dvh - 16px); }
  .modal-box.lg { max-height: 92dvh; border-radius: 16px; }
}

/* ── Settings Accordion (sa-*) ──────────────────────────────── */
.sa-group {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--gray-100);
  background: white;
  box-shadow: var(--shadow-sm);
}
/* 設定頁：sa-group 同時作為卷動容器時，允許 y 軸卷動 */
.card.table-card.sa-group {
  overflow-y: auto !important;
}

/* 第一層 item */
.sa-item {
  border-bottom: 1px solid var(--gray-100);
}
.sa-item:last-child { border-bottom: none; }

/* 第一層 header */
.sa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  cursor: pointer;
  user-select: none;
  background: white;
  transition: background .15s;
}
.sa-header:hover { background: var(--gray-50); }

/* 第一層箭頭 */
.sa-chevron {
  font-size: 12px;
  color: var(--gray-400);
  transition: color .15s;
}
.sa-header:hover .sa-chevron { color: var(--teal-dark); }

/* 第一層 body */
.sa-body {
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  padding: 16px 20px;
}
.sa-body.hidden { display: none; }

/* 第二層 group 容器 */
.sa-inner {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--gray-100);
  overflow: hidden;
}

.rate-edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--gray-50);
  border-radius: 8px;
  border: 1px solid var(--gray-100);
}

body.theme-glass .rate-edit-row {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.1);
  border-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.2);
}

/* 第二層 item */
.sa-sub-item {
  border-bottom: 1px solid var(--gray-100);
}
.sa-sub-item:last-child { border-bottom: none; }

/* 第二層 header */
.sa-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.sa-sub-header:hover { background: var(--gray-50); }

/* 第二層箭頭 */
.sa-sub-chevron {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-400);
  display: inline-block;
  transition: transform .2s, color .15s;
  line-height: 1;
}
.sa-sub-chevron.open { transform: rotate(90deg); color: var(--teal-dark); }
.sa-sub-header:hover .sa-sub-chevron { color: var(--teal-dark); }

/* 第二層 body */
.sa-sub-body {
  padding: 12px 16px;
  border-top: 1px solid var(--gray-100);
  background: #f8fafc;
}
.sa-sub-body.hidden { display: none; }
.sa-sub-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
}

/* 新增帳戶列 */
.sa-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.sa-add-row:hover { background: var(--teal-light); }

/* icon-box 顏色補充 */
.icon-box.indigo { background: #e0e7ff; color: #6366f1; }
.icon-box.purple { background: #f3e8ff; color: #a855f7; }

/* color-dot 顏色補充 */
.color-dot.teal   { background: var(--teal, #14b8a6); }
.color-dot.blue   { background: var(--blue, #0ea5e9); }
.color-dot.rose   { background: var(--rose, #f43f5e); }
.color-dot.amber  { background: var(--amber, #f59e0b); }
.color-dot.purple { background: #a855f7; }
/* ── Investment Portfolio UI ────────────────────────────── */
.inv-container { padding: 0; }
.inv-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap; gap: 16px;
}
.inv-tabs {
  display: flex; background: var(--gray-100); 
  padding: 4px; border-radius: 12px; border: 1px solid var(--gray-200);
}
.inv-tab {
  padding: 8px 16px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-weight: 500;
  transition: all 0.2s; border: none; background: transparent; color: var(--gray);
}
.inv-tab.active { background: white; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.inv-tab .count {
  background: var(--gray-light); color: var(--gray);
  padding: 2px 8px; border-radius: 20px; font-size: 11px;
}
.inv-tab.active.us .count { background: var(--rose-light); color: var(--rose); }
.inv-tab.active.tw .count { background: var(--teal-light); color: var(--teal); }

.asset-info { display: flex; align-items: center; gap: 12px; }
.ticker-icon {
  width: 40px; height: 40px; border-radius: 10px; 
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  /* 預設：股票=綠色系，債券=粉紅色系 */
  background: var(--blue-light); color: var(--blue); border: 1px solid rgba(14,165,233,0.2);
}
.ticker-icon-lg {
  width: 56px; height: 56px; border-radius: 12px;
  font-size: 12px; font-weight: 800; letter-spacing: -0.3px;
}
.ticker-icon.stock {
  background: #dcfce7; color: #166534; border: 1px solid #86efac;
}
.ticker-icon.bond {
  background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
}
/* glass 主題 */
body.theme-glass .ticker-icon.stock {
  background: rgba(134,239,172,0.18); color: #86efac; border-color: rgba(134,239,172,0.35);
}
body.theme-glass .ticker-icon.bond {
  background: rgba(252,165,165,0.18); color: #fca5a5; border-color: rgba(252,165,165,0.35);
}
/* stardust 主題 */
body.theme-stardust .ticker-icon.stock {
  background: rgba(110,231,183,0.18); color: #34d399; border-color: rgba(110,231,183,0.35);
}
body.theme-stardust .ticker-icon.bond {
  background: rgba(249,168,212,0.18); color: #f472b6; border-color: rgba(249,168,212,0.35);
}
/* ── ticker-text-label：純文字持股標籤（取代彩色方塊圖示） ── */
.ticker-text-label {
  display: block;
  font-family: inherit;
  font-size: clamp(13px, 2.2vw, 20px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.theme-glass .ticker-text-label,
body.theme-stardust .ticker-text-label {
  color: var(--text-primary);
}



.badge-pill {
  padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 500;
}
.badge-pill.stock { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-pill.bond  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
body.theme-glass .badge-pill.stock { background: rgba(134,239,172,0.15); color: #86efac; border-color: rgba(134,239,172,0.3); }
body.theme-glass .badge-pill.bond  { background: rgba(252,165,165,0.15); color: #fca5a5; border-color: rgba(252,165,165,0.3); }
body.theme-stardust .badge-pill.stock { background: rgba(110,231,183,0.15); color: #34d399; border-color: rgba(110,231,183,0.3); }
body.theme-stardust .badge-pill.bond  { background: rgba(249,168,212,0.15); color: #f472b6; border-color: rgba(249,168,212,0.3); }

/* ── year-nav：絕對置中在 year-header-pill 中 ── */
.year-header-pill { position: relative; }
.year-nav {
  display: flex; align-items: center; gap: 8px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.year-nav-label {
  font-size: 28px; font-weight: 900; letter-spacing: -0.5px;
  min-width: 140px; text-align: center; line-height: 1; display: block;
}
.year-nav h2 {
  margin: 0 !important; padding: 0 !important;
  font-size: 28px; font-weight: 900; letter-spacing: -0.5px;
  min-width: 140px; text-align: center; line-height: 1;
}
.year-nav .btn-icon { font-size: 22px; width: 40px; height: 40px; }
body:not(.theme-glass):not(.theme-stardust) .year-nav h2 { color: var(--teal-dark) !important; }
body:not(.theme-glass):not(.theme-stardust) .year-nav-label { color: var(--teal-dark) !important; }
body.theme-stardust .year-nav h2 { color: #42628C !important; }
body.theme-stardust .year-nav-label { color: #42628C !important; }
body.theme-glass .year-nav h2 { color: var(--glass-text) !important; text-shadow: var(--glass-text-shadow, none) !important; }
body.theme-glass .year-nav-label { color: rgba(255,255,255,0.92) !important; }


.stacked-val { display: flex; flex-direction: column; line-height: 1.4; }
.val-sub { font-size: 11px; color: var(--gray); }
.val-main { font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.profit-val { font-weight: 700; font-size: 15px; }

.inv-filter-group { display: flex; align-items: center; gap: 12px; }
.select-sm {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: white; font-size: 13px; outline: none;
}

@media (max-width: 768px) {
  .inv-header { flex-direction: column; align-items: stretch; }
  .inv-tabs { overflow-x: auto; }
}
.cur-toggle {
  padding: 4px 16px; border-radius: 20px; font-weight: 800; font-size: 14px;
  cursor: pointer; transition: all 0.2s; border: 2px solid #f87171;
  display: flex; align-items: center; justify-content: center;
}
.cur-toggle.USD { background: #f0f9ff; color: #f87171; }
.cur-toggle.TWD { background: #f87171; color: white; }
.cur-toggle:active { transform: scale(0.95); }

/* ── 資產負債表外層折疊 ── */
.bs-outer-group { margin-bottom: 4px; }
.bs-outer-header:hover { background: var(--bg-alt, #f8fafc) !important; }

/* ── 預算帳戶進度卡片 ── */
.budget-acc-card { transition: transform 0.3s ease; }

/* ── Portfolio UI (New) ────────────────────────────────────── */
.inv-toolbar-new {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 24px 10px 16px;
  gap: 24px;
  flex-wrap: nowrap;
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
}
.inv-toolbar-new .page-header-bar {
  flex-shrink: 0;
  padding: 0;
}
.inv-toolbar-new .page-title {
  flex-shrink: 0;
}

.inv-center-tabs {
  flex: 1;
  display: flex;
  justify-content: center;
}

.inv-tabs-minimal {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.inv-tab-min {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.inv-tab-min span {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 6px;
  opacity: 0.7;
}

.inv-tab-min.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.inv-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-action-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.05);
  color: var(--gray-600, #4b5563);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.btn-action-icon:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--gray-800, #1f2937);
  border-color: rgba(0, 0, 0, 0.2);
}

/* Glass 主題覆蓋 */
body.theme-glass .btn-action-icon {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}
body.theme-glass .btn-action-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Stardust 主題覆蓋 */
body.theme-stardust .btn-action-icon {
  border-color: rgba(86, 132, 191, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #42628C;
}
body.theme-stardust .btn-action-icon:hover {
  background: rgba(86, 132, 191, 0.15);
  color: #2d4155;
  border-color: rgba(86, 132, 191, 0.5);
}

.btn-action-icon.USD, .btn-action-icon.TWD {
  width: auto;
  padding: 0 12px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 13px;
}

.action-sep {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 4px;
}
body.theme-glass .action-sep {
  background: rgba(255, 255, 255, 0.1);
}
body.theme-stardust .action-sep {
  background: rgba(86, 132, 191, 0.3);
}

/* ── Investment Tools Dropdown ─────────────────────────────── */
.inv-tools-dropdown {
  position: relative;
}

.inv-tools-trigger {
  /* inherits .btn-action-icon */
}

.inv-tools-menu {
  display: none;
  position: fixed;
  top: auto;
  right: 24px;
  background: rgba(18, 24, 38, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  padding: 5px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 99999;
  flex-direction: row;
  gap: 2px;
}

.inv-tools-menu.open {
  display: flex;
  animation: toolsDropIn 0.18s ease;
}

@keyframes toolsDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   Tools Pill — 統一工具列展開樣式（收支明細 & 投資明細共用）
   只顯示向量圖示 + tooltip，主題自動適配
   ══════════════════════════════════════════════════════════════ */
.tools-pill {
  display: none;
  position: fixed;
  z-index: 99999;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  border-radius: 50px;
  /* Default 主題：半透明白底 */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 1.5px 0 rgba(255,255,255,0.9) inset;
  animation: toolsDropIn 0.18s ease;
}
.tools-pill:not(.hidden) { display: flex; }

.tools-pill-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
  /* Default: 深色圖示 */
  color: var(--gray-600);
  position: relative;
}
.tools-pill-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}
.tools-pill-item:hover {
  background: var(--teal-light);
  color: var(--teal-dark);
  transform: scale(1.08);
}
.tools-pill-danger { color: var(--rose); }
.tools-pill-danger:hover { background: var(--rose-light); color: var(--rose); }

.tools-pill-sep {
  width: 1px;
  height: 20px;
  background: var(--gray-200);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Tooltip */
.tools-pill-item::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100000;
}
.tools-pill-item:hover::after { opacity: 1; }

/* ── 莫蘭迪主題：tools-pill 使用各自 sidebar 色（c2） ─── */
body.theme-morand-1 .tools-pill { background: #7A4E3A; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(122,78,58,0.45); }
body.theme-morand-2 .tools-pill { background: #6A7A5E; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(106,122,94,0.45); }
body.theme-morand-3 .tools-pill { background: #8A7E62; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(138,126,98,0.45); }
body.theme-morand-4 .tools-pill { background: #B8845A; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(184,132,90,0.45); }
body.theme-morand-5 .tools-pill { background: #506878; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(80,104,120,0.45); }
body.theme-morand-6 .tools-pill { background: #847870; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(132,120,112,0.45); }
body.theme-morand-7 .tools-pill { background: #B08040; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(176,128,64,0.45); }
body.theme-morand-8 .tools-pill { background: #8A5848; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(138,88,72,0.45); }
body.theme-morand-9 .tools-pill { background: #808080; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(128,128,128,0.45); }
[class*="theme-morand"] .tools-pill-item { color: rgba(255,255,255,0.85); }
[class*="theme-morand"] .tools-pill-item:hover { background: rgba(255,255,255,0.18); color: #ffffff; }
[class*="theme-morand"] .tools-pill-danger { color: #fda4af; }
[class*="theme-morand"] .tools-pill-danger:hover { background: rgba(253,164,175,0.2); color: #fda4af; }
[class*="theme-morand"] .tools-pill-sep { background: rgba(255,255,255,0.22); }

/* ── 星塵主題：對齊 sidebar #42628C 深藍底 ─── */
body.theme-stardust .tools-pill {
  background: #42628C;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 28px rgba(66, 98, 140, 0.5);
}
body.theme-stardust .tools-pill-item { color: rgba(255,255,255,0.85); }
body.theme-stardust .tools-pill-item:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
body.theme-stardust .tools-pill-danger { color: #a8c8f0; }
body.theme-stardust .tools-pill-danger:hover { background: rgba(97,86,166,0.25); color: #c4b5fd; }
body.theme-stardust .tools-pill-sep { background: rgba(255,255,255,0.2); }

/* ── Glass 主題：對齊 sidebar 深藍灰磨砂底 ─── */
body.theme-glass .tools-pill {
  background: rgba(15, 17, 23, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255,255,255,0.08) inset;
}
body.theme-glass .tools-pill-item { color: rgba(255,255,255,0.7); }
body.theme-glass .tools-pill-item:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}
body.theme-glass .tools-pill-danger { color: #fb7185; }
body.theme-glass .tools-pill-danger:hover { background: rgba(251,113,133,0.15); color: #fb7185; }
body.theme-glass .tools-pill-sep { background: rgba(255,255,255,0.15); }

.inv-tools-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gray-600, #4b5563);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.inv-tools-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

.inv-tools-item:hover {
  background: var(--teal-light, rgba(204,251,241,0.8));
  color: var(--teal-dark, #0f766e);
}


/* ── inv-tools-menu 主題適配（對齊 sidebar 底色）─── */
body.theme-morand-1 .inv-tools-menu { background: #7A4E3A; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(122,78,58,0.45); }
body.theme-morand-2 .inv-tools-menu { background: #6A7A5E; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(106,122,94,0.45); }
body.theme-morand-3 .inv-tools-menu { background: #8A7E62; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(138,126,98,0.45); }
body.theme-morand-4 .inv-tools-menu { background: #B8845A; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(184,132,90,0.45); }
body.theme-morand-5 .inv-tools-menu { background: #506878; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(80,104,120,0.45); }
body.theme-morand-6 .inv-tools-menu { background: #847870; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(132,120,112,0.45); }
body.theme-morand-7 .inv-tools-menu { background: #B08040; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(176,128,64,0.45); }
body.theme-morand-8 .inv-tools-menu { background: #8A5848; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(138,88,72,0.45); }
body.theme-morand-9 .inv-tools-menu { background: #808080; border-color: rgba(255,255,255,0.15); box-shadow: 0 8px 28px rgba(128,128,128,0.45); }
[class*="theme-morand"] .inv-tools-item { color: rgba(255,255,255,0.85); }
[class*="theme-morand"] .inv-tools-item:hover { background: rgba(255,255,255,0.15); color: #ffffff; }

body.theme-stardust .inv-tools-menu {
  background: #42628C;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 28px rgba(66, 98, 140, 0.5);
}
body.theme-stardust .inv-tools-item { color: rgba(255,255,255,0.85); }
body.theme-stardust .inv-tools-item:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Glass: 對齊 sidebar 深藍灰磨砂 */
body.theme-glass .inv-tools-menu {
  background: rgba(15, 17, 23, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
body.theme-glass .inv-tools-item { color: rgba(255,255,255,0.7); }
body.theme-glass .inv-tools-item:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

.select-minimal {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  padding-right: 4px;
}

.select-minimal option {
  background: var(--gray-900);
  color: white;
}

/* ── Fix Monthly Dropdown ─────────────────────────────────── */
body.theme-glass .header-flat-stats {
  overflow: visible !important;
}

body.theme-glass .dropdown {
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body.theme-glass .dropdown-item {
  color: var(--text-secondary);
}

body.theme-glass .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.inv-main-table thead th {
  background: rgba(30, 41, 59, 0.95); /* 加深確保完全遮住下方捲動內容 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* border-collapse:collapse 會破壞 sticky thead，用 separate+spacing:0 取代 */
.inv-main-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ── Layout Override: Conditional One-Page View ── */
.one-page-layout .app-layout {
  height: 100vh;
  overflow: hidden;
  display: flex;
}

.one-page-layout .main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.one-page-layout .page-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* one-page-layout 下 Default 主題的 page-content */
body.one-page-layout:not(.theme-glass):not(.theme-stardust) .page-content {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  margin: 12px 96px 12px 28px;
  padding: 20px 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  width: calc(100% - 124px);
  /* max-width removed: was causing ghost frame on right side */
  height: calc(100vh - 24px);
  min-height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
}

/* one-page-layout 下 Stardust 主題的 page-content */
body.one-page-layout.theme-stardust .page-content {
  background: rgba(238, 242, 255, 0.80);
  border-radius: 28px;
  margin: 12px 96px 12px 28px;
  padding: 20px 24px;
  border: 1.5px solid rgba(86, 132, 191, 0.25);
  box-shadow: 0 4px 24px rgba(66, 98, 140, 0.12);
  width: calc(100% - 124px);
  /* max-width removed: was causing ghost frame on right side */
  height: calc(100vh - 24px);
  min-height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
}

.one-page-layout #main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  padding-bottom: 0;
}

/* 讓表格卡片或圖表卡片自適應剩餘空間並內部捲動 */
.card.table-card, 
.card.overflow-auto, 
.card.nw-chart-card,
.card.inv-main-card,
.chart-grid {
  flex: 1;
  overflow: auto !important;
  border-radius: 20px;
}

/* 確保 chart-grid 內部的容器也能正確佈局 */
.chart-grid {
  display: grid;
  overflow: hidden !important;
}

.chart-grid > div {
  overflow: auto;
}

/* 統一 Export 按鈕樣式 */
.btn-action-icon.white-icon svg,
.nw-detail-btn svg,
.ticker-excel-btn svg {
  stroke: #ffffff !important;
}

.nw-detail-btn, .ticker-excel-btn {
  background: var(--bg-sidebar, #0f766e);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.nw-detail-btn:hover, .ticker-excel-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Glass 主題下恢復半透明玻璃感 */
body.theme-glass .nw-detail-btn,
body.theme-glass .ticker-excel-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
body.theme-glass .nw-detail-btn:hover,
body.theme-glass .ticker-excel-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  filter: none;
}

/* 彈窗內表格標題「沉入」效果 */
.modal-box thead th,
.nw-table thead th,
.ticker-detail-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(var(--glass-ui-color-rgb, 30, 41, 59), 0.8) !important;
  backdrop-filter: blur(15px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
  border-bottom: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.15) !important;
}

/* 防止內容在捲動時與標題欄文字重疊，標題欄背景需有一定不透明度 */
.modal-header.modal-fixed-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--glass-ui-color-rgb, 15, 23, 42), 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.15);
}

/* ── Fintech Ring Card (glassmorphism + neon breath) ──────── */
.fintech-ring-card {
  position: relative;
  background: var(--bg-card, #fff);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), background 0.4s ease;
}
.fintech-ring-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.06) 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* ① 卡片外圍光暈 */
.ring-card-glow {
  position: absolute;
  inset: -16px;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 55%, var(--ring-color, #6366f1) 0%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  filter: blur(12px);
}

/* Hover: 卡片輕升 */
.fintech-ring-card:hover {
  transform: translateY(-3px) scale(1.03);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ① 卡片外圍呼吸光暈 */
.fintech-ring-card:hover .ring-card-glow {
  animation: neonBreath 2.4s ease-in-out infinite;
}

/* ① 卡片外框螢光邊 */
.fintech-ring-card:hover::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 17px;
  background: transparent;
  border: 1.5px solid var(--ring-color, #6366f1);
  pointer-events: none;
  animation: neonBorder 2.4s ease-in-out infinite;
  z-index: 2;
}

/* ② SVG 色圈呼吸光：用 transition 做 filter，不覆蓋 draw 動畫 */
.ring-arc {
  /* 不設 stroke-dashoffset：由注入的 per-card <style> 控制 */
  filter: drop-shadow(0 0 4px var(--ring-color, #6366f1));
  transition: filter 0.4s ease;
}
.fintech-ring-card:hover .ring-arc {
  /* transition filter 做呼吸光，不動 animation（保留 draw 動畫的 forwards 狀態） */
  filter: drop-shadow(0 0 3px var(--ring-color, #6366f1));
  animation: ringGlowBreath 2.4s ease-in-out infinite;
  /* 關鍵：同時保留 stroke-dashoffset 在終點 → 用 animation-fill-mode: forwards
     但 ringGlowBreath 只改 filter，不動 dashoffset，所以不會重置位置 */
}

@keyframes neonBreath {
  0%   { opacity: 0.06; transform: scale(0.94); }
  50%  { opacity: 0.38; transform: scale(1.06); }
  100% { opacity: 0.06; transform: scale(0.94); }
}
@keyframes neonBorder {
  0%   { opacity: 0.15; box-shadow: 0 0 4px 1px var(--ring-color, #6366f1); }
  50%  { opacity: 0.80; box-shadow: 0 0 18px 5px var(--ring-color, #6366f1); }
  100% { opacity: 0.15; box-shadow: 0 0 4px 1px var(--ring-color, #6366f1); }
}
/* ── Ticker 買賣明細 Modal ─────────────────────────────────── */
.ticker-detail-table-wrap {
  flex: 1;
  overflow: auto;
  /* 讓表頭 sticky 生效需要有限高父容器 */
}
.ticker-detail-table {
  min-width: 600px;
  border-collapse: collapse;
  width: 100%;
}
.ticker-detail-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--gray-50);
  padding: 11px 16px;
  font-size: 10px;
  font-weight: 800;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  border-bottom: 2px solid var(--gray-200);
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s;
}
.ticker-detail-table thead th:hover {
  color: var(--teal-dark);
  background: var(--teal-light);
}
.ticker-detail-table thead th .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  transition: opacity .15s;
}
.ticker-detail-table thead th .sort-arrow.inactive {
  opacity: 0.3;
}
.ticker-detail-table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--gray-50);
  white-space: nowrap;
}
.ticker-detail-table .data-row:hover td {
  background: var(--teal-light);
}

/* Excel 匯出按鈕 — 圖示配主題色，無 tooltip 文字 */
.ticker-excel-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--teal-dark);
  background: var(--teal-light);
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.ticker-excel-btn:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
/* tooltip 完全關閉：title 屬性由瀏覽器控制，這裡只是確保無額外文字 */

@keyframes ringGlowBreath {
  /* 只動 filter，不碰 stroke-dashoffset */
  0%   { filter: drop-shadow(0 0 2px var(--ring-color, #6366f1)) drop-shadow(0 0 2px var(--ring-color, #6366f1)); }
  50%  { filter: drop-shadow(0 0 10px var(--ring-color, #6366f1)) drop-shadow(0 0 22px var(--ring-color, #6366f1)); }
  100% { filter: drop-shadow(0 0 2px var(--ring-color, #6366f1)) drop-shadow(0 0 2px var(--ring-color, #6366f1)); }
}

.fintech-ring-card > * { position: relative; z-index: 1; }

/* ── 光圈進度動畫：每張卡在 HTML 注入獨立 @keyframes ── */

/* ── 持倉展開明細 ───────────────────────────────────── */
.inv-expandable:hover { background: var(--bg-subtle, rgba(0,0,0,0.02)); }
.inv-sub-row td { border-bottom: 1px solid var(--sep); }
.inv-sub-row:last-of-type td { border-bottom: 2px solid var(--sep); }

/* 月收支明細 chart-grid 響應式 */
@media (max-width: 900px) {
  #budget-progress-panel { min-width: unset; max-width: unset; }
  .chart-grid { grid-template-columns: 1fr !important; }
  #budget-progress-panel > div { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important; }
}
@media (max-width: 1200px) and (min-width: 901px) {
  /* 中等螢幕：圓餅+預算並排，帳戶進出卡獨佔一行 */
  .monthly-snap-item:not(.monthly-snap-item--flex) .chart-grid {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) !important;
  }
  .acc-flow-card {
    grid-column: 1 / -1;
  }
}
/* ── SVG Icon 系統 ────────────────────────────────────────── */
.icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-box .icon-svg svg,
.icon-box svg {
  width: 22px; height: 22px;
}
.icon-box.sm .icon-svg svg,
.icon-box.sm svg {
  width: 18px; height: 18px;
}
body.theme-glass .icon-box svg {
  filter: var(--glass-ui-icon-filter, none);
}

/* btn-icon hover/active 薄荷綠 */
.btn-icon:hover {
  background: var(--teal-light);
  color: var(--teal-dark);
}
.btn-icon.active,
.btn-icon:active {
  background: var(--teal);
  color: #fff;
}

/* dropdown-item icon */
.dropdown-item svg {
  width: 16px; height: 16px; flex-shrink: 0;
}

/* toggle-btn icon */
.toggle-btn svg {
  width: 15px; height: 15px;
}

/* nav-tooltip 已是深灰底白字，確認正確 */
/* ─── Vector icon system ──────────────────────────────────── */
/* icon-svg: used inside icon-box (card stat icons, accordion icons) */
.icon-svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: block;
}
.icon-box.sm .icon-svg {
  width: 16px; height: 16px;
}

/* btn-svg: used inside buttons, dropdowns, text labels */
.btn-svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

@keyframes spinRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.btn-svg.spin, .spin {
  animation: spinRotate 0.8s linear infinite !important;
  transform-origin: center !important;
  display: inline-block !important;
}

/* logo-svg: the sidebar leaf icon */
.logo-svg {
  width: 22px; height: 22px;
  display: block;
  color: var(--teal, #14b8a6);
}
.logo-dot {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Floating Action Button (FAB) ────────────────────────── */
.fab-add {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  z-index: 10000;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
}

.fab-add:hover {
  transform: scale(1.1) translateY(-8px);
  background: var(--teal-dark);
  box-shadow: 0 20px 40px rgba(0,0,0,0.30);
}

.fab-add:active {
  transform: scale(0.95);
}

/* FAB Tooltip */
.fab-add::after {
  content: '新增紀錄';
  position: absolute;
  right: calc(100% + 15px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}

.fab-add:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.fab-add .icon-svg {
  width: 32px;
  height: 32px;
}

/* 磨砂玻璃主題適配 */
body.theme-glass .fab-add {
  background: rgba(45, 65, 85, 0.4); /* 藍灰色磨砂感 */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.3), 
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(125, 211, 252, 0.1);
  color: #fff;
}
body.theme-glass .fab-add:hover {
  background: rgba(45, 65, 85, 0.6);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 15px 50px rgba(0, 0, 0, 0.4), 
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 0 30px rgba(125, 211, 252, 0.2);
}
body.theme-glass .nw-recalc-btn {
  background: var(--glass-secondary-bg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  color: var(--glass-recalc-icon-color, rgba(255, 255, 255, 0.95)) !important;
}
body.theme-glass .nw-recalc-btn svg {
  stroke: var(--glass-recalc-icon-stroke, #ffffff) !important;
}

/* 星塵瀑布主題適配 */
body.theme-stardust .fab-add {
  background: #243141; /* 使用工具列底色藍 */
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}
body.theme-stardust .fab-add:hover {
  background: #2D4155;
  color: var(--teal);
  box-shadow: 0 16px 32px rgba(0,0,0,0.3);
}

/* 投資頁面磨砂適配 (修正字看不到的問題) */
body.theme-glass .inv-tabs {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
body.theme-glass .inv-tab {
  color: rgba(255, 255, 255, 0.7);
}
body.theme-glass .inv-tab.active {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
body.theme-glass .cur-toggle {
  background: rgba(45, 65, 85, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* 磨砂玻璃：側邊欄持有人切換器 */
body.theme-glass .owner-selector {
  background: linear-gradient(135deg, rgba(35, 38, 48, 0.85), rgba(25, 28, 35, 0.75));
  backdrop-filter: blur(15px) saturate(160%);
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  border-radius: 14px;
  padding: 6px; /* 縮減 Padding 增加內部文字寬度 */
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.theme-glass .owner-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  margin-bottom: 4px;
  font-weight: 600;
}
body.theme-glass .owner-select {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 12px; /* 稍微調小字體確保容納 */
  padding: 4px 2px; /* 最小化左右 Padding */
  text-align: center;
  outline: none;
  cursor: pointer;
  width: 100%;
}
body.theme-glass .owner-select option {
  background: #2d4155; /* 深藍灰背景確保文字可見 */
  color: #fff;
}

/* 莫蘭迪 持有人切換器：使用 CSS 變數，自動跟隨各主題 */
[class*="theme-morand"] .owner-selector {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 4px;
  margin-top: 6px;
}
[class*="theme-morand"] .owner-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
}
[class*="theme-morand"] .owner-select {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 2px;
  outline: none;
  cursor: pointer;
  height: 34px;
  width: 100%;
  text-align: center;
}
[class*="theme-morand"] .owner-select:hover { background: rgba(255,255,255,0.25); }
[class*="theme-morand"] .owner-select option { background: var(--bg-sidebar); color: #fff; }
[class*="theme-morand"] .owner-select option:checked { background: var(--teal-dark) !important; color: #fff !important; }

/* 星塵瀑布 持有人切換器：對齊 sidebar #42628C 深藍 */
body.theme-stardust .owner-selector {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 4px;
  margin-top: 6px;
}
body.theme-stardust .owner-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}
body.theme-stardust .owner-select {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 2px;
  outline: none;
  cursor: pointer;
  height: 34px;
  width: 100%;
  text-align: center;
}
body.theme-stardust .owner-select:hover {
  background: rgba(255, 255, 255, 0.25);
}
body.theme-stardust .owner-select option {
  background: #243141;
  color: #fff;
}
body.theme-stardust .owner-select option:checked {
  background: #42628C !important;
  color: #ffffff !important;
}
/* ─── Global Scrollbar ─── */
::-webkit-scrollbar { 
  width: 10px !important; 
  height: 10px !important; 
}
::-webkit-scrollbar-track { 
  background: rgba(0, 0, 0, 0.05) !important; 
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb { 
  background: rgba(255, 255, 255, 0.15) !important; 
  border-radius: 10px !important; 
  border: 2px solid transparent !important;
  background-clip: content-box !important;
  min-height: 40px !important;
}
::-webkit-scrollbar-thumb:hover { 
  background: rgba(255, 255, 255, 0.3) !important; 
  background-clip: content-box !important;
}

body.theme-glass ::-webkit-scrollbar-thumb { 
  background: rgba(255, 255, 255, 0.2) !important; 
}
body.theme-glass ::-webkit-scrollbar-thumb:hover { 
  background: rgba(255, 255, 255, 0.4) !important; 
}

/* Header Main Group (NAV + STATS) */
.header-main-group {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: 40px;
}

.header-flat-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  background: rgba(0, 0, 0, 0.04);
  padding: 8px 24px;
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.monthly-header-pill {
  gap: 10px;
}
.monthly-header-pill .page-header-left {
  flex: 0 0 auto;
}
.monthly-header-pill .month-nav {
  flex: 0 0 auto;
}
.monthly-header-stats {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  gap: 14px;
  padding: 4px 10px;
}
.monthly-header-stats .stat-item {
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.monthly-header-stats .label {
  font-size: 10px;
  line-height: 1;
}
.monthly-header-stats .val {
  font-size: 46px;
  line-height: 1;
}
@media (max-width: 1100px) {
  .monthly-header-stats {
    gap: 10px;
  }
  .monthly-header-stats .val {
    font-size: 40px;
  }
}
@media (max-width: 900px) {
  .monthly-header-pill {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .monthly-header-stats {
    width: 100%;
    order: 3;
    justify-content: space-between;
  }
  .monthly-header-stats .stat-item {
    align-items: flex-start;
  }
  .monthly-header-stats .val {
    font-size: 34px;
  }
}
body.theme-glass .header-flat-stats {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-stardust .header-flat-stats {
  background: rgba(86, 132, 191, 0.08);
  border-color: rgba(86, 132, 191, 0.2);
}
.header-flat-stats .stat-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.header-flat-stats .label {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  font-weight: 600;
}
body.theme-glass .header-flat-stats .label { color: var(--glass-ui-text-sub) !important; opacity: 0.85; }
.header-flat-stats .val {
  font-size: 18px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}

.btn-icon-transparent {
  background: transparent;
  border: none;
  color: var(--gray-500, #6b7280);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-icon-transparent:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--gray-800, #1f2937);
}

body.theme-glass .btn-icon-transparent {
  color: var(--text-secondary);
}
body.theme-glass .btn-icon-transparent:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
body.theme-stardust .btn-icon-transparent {
  color: #42628C;
}
body.theme-stardust .btn-icon-transparent:hover {
  background: rgba(86, 132, 191, 0.12);
  color: #2d4155;
}

/* Chart Header Tabs */
.chart-header-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 4px 12px;
}

.chart-tab {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  position: relative;
  transition: all 0.3s;
}

/* 磨砂模式下強制對比色 */
body.theme-glass .chart-tab {
  color: var(--glass-ui-text) !important;
  text-shadow: var(--glass-ui-text-shadow, none) !important;
}

.chart-tab:hover {
  color: var(--text-primary);
}

body.theme-glass .chart-tab:hover {
  color: var(--glass-ui-text) !important;
  opacity: 0.8;
}

.chart-tab.active {
  color: var(--text-primary);
}

body.theme-glass .chart-tab.active {
  color: var(--glass-ui-text) !important;
  opacity: 1;
}

.chart-tab.active::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--teal);
  border-radius: 10px;
  box-shadow: 0 0 10px var(--teal);
}

.total-label {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Modal Enlargement & Readability */
.modal-box.lg {
  max-width: 1100px;
  width: 95%;
}

.modal-box.lg .nw-table {
  font-size: 15px;
}

.modal-box.lg .nw-table th,
.modal-box.lg .nw-table td {
  padding: 16px 20px;
}

.modal-box.lg .nw-month {
  font-size: 16px;
}

/* Sticky Table Header with Blur */
.table-wrap {
  position: relative;
  overflow: auto;
}

.tx-table thead th, 
.nw-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: inherit;
}

body.theme-glass .tx-table thead th,
body.theme-glass .nw-table thead th {
  backdrop-filter: blur(15px);
  background: rgba(var(--glass-ui-color-rgb, 30, 41, 59), 0.8) !important;
  border-bottom: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.15) !important;
}

/* Vector Filter Button */
.btn-filter-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s;
  background: var(--glass-secondary-bg, var(--gray-100));
  border: 1px solid var(--sep, var(--gray-300));
  color: var(--text-primary);
  cursor: pointer;
}
.btn-filter-icon:hover {
  background: var(--gray-200);
}
body.theme-glass .btn-filter-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
body.theme-glass .btn-filter-icon:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Theme Selection in Settings ── */
.theme-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.theme-option {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s;
}
.theme-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}
.theme-option.active {
  background: var(--teal-light);
  border-color: var(--teal);
}
.theme-preview {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.theme-preview.glass { 
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ── 莫蘭迪九宮格選色器 ────────────────────────────────────── */
.morand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.morand-cell {
  position: relative;
  border-radius: 12px;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.18s;
}
.morand-cell:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.morand-cell.active {
  border-color: var(--teal);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px var(--teal);
}
.morand-swatch {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.08);
}
.morand-swatch-strip {
  flex: 1;
  width: 100%;
}
.morand-cell-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary, rgba(15,23,42,0.55));
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}
.morand-check {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  font-weight: 900;
  color: var(--teal);
}

/* ── 資產變化頁面：pill 內的 controls 靠右排列 ─────────────── */
.nw-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nw-range-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* nw-year-sel 已由 nw-pill-group / nw-pill-btn 取代，保留此段以相容舊版 */
.nw-year-sel {
  display: none;
}

body.theme-glass .nw-year-sel {
  display: none;
}

/* 折線圖 card 寬度與其他頁面 card 一致 */
.nw-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.nw-page .card.nw-chart-card {
  width: 100%;
  box-sizing: border-box;
}

/* ── 年度報表表格優化 ── */
.yearly-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px !important;
}

.yearly-table th, 
.yearly-table td {
  padding: 14px 12px !important;
  white-space: nowrap;
}

/* 分類欄寬度調整 */
.yearly-table .sticky-col {
  min-width: 180px;
  max-width: 260px;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* 數據欄位 */
.yearly-table .mono {
  font-size: 15px !important;
  letter-spacing: -0.01em;
}

/* 佔比條寬度優化 */
.yearly-table .progress-bar {
  width: 100px;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(0,0,0,0.05);
}

/* 小計行強調 */
.section-subtotal-row td {
  padding: 16px 12px !important;
  border-top: 2px solid rgba(0,0,0,0.1);
  border-bottom: 2px solid rgba(0,0,0,0.05);
  font-size: 16px !important;
  font-weight: 900;
}
.section-subtotal-row.teal td { background: var(--teal-light) !important; }
.section-subtotal-row.rose td { background: rgba(255,228,230,0.6) !important; }
.section-subtotal-row.amber td { background: rgba(254,243,199,0.6) !important; }
.section-subtotal-row.indigo td { background: rgba(224,231,255,0.6) !important; }

body.theme-glass .section-subtotal-row td {
  background: rgba(255,255,255,0.15) !important;
  border-top-color: rgba(255,255,255,0.3) !important;
}

/* 確保橫向滾動時，陰影更明顯 */
.sticky-col {
  box-shadow: 6px 0 20px rgba(0,0,0,0.12) !important;
}


/* ── 圓餅圖下鑽返回按鈕 ── */
.chart-back-btn:hover {
  background: rgba(99, 102, 241, 0.28) !important;
}
/* 提示圓餅扇形可點擊 */
#monthly-chart canvas {
  cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════
   yearly snap-scroll: height-driven by CSS, no outer overflow
   ══════════════════════════════════════════════════════════════ */

/* Scroll container: fills the space below the header inside page-content
   page-content glass: max-height calc(100vh - 32px), padding 24px top/bottom
   header-pill: ~58px + 16px margin-bottom = 74px
   Remaining: 100vh - 32px - 48px(padding) - 74px = 100vh - 154px          */
#yearly-scroll-outer {
  height: calc(100vh - 154px);
}

/* Each snap page fills the scroll container exactly */
#yearly-page1,
#yearly-page2 {
  box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════
   年度收支明細 — 2-page scroll-snap layout (clean rewrite)
   ══════════════════════════════════════════════════════════════ */

/* page-content stays unchanged — only the inner section adjusts */
.yearly-snap-page {
  display: flex;
  flex-direction: column;
  /* fill whatever height page-content gives us */
  height: 100%;
  overflow: hidden;
}

/* Scroll container: fills height below the header pill */
.yearly-snap-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,0.35) transparent;
}
.yearly-snap-scroll::-webkit-scrollbar {
  width: 6px;
}
.yearly-snap-scroll::-webkit-scrollbar-thumb {
  background: rgba(128,128,128,0.35);
  border-radius: 6px;
}
.yearly-snap-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* Each snap page = exactly one viewport of the scroll container */
.yearly-snap-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* flex: 0 0 100% means: don't grow, don't shrink, take exactly 100% of container height */
  flex: 0 0 100%;
  /* display:flex + flex-direction:column is REQUIRED so that child height:100%
     resolves correctly; without it, #yearly-page1 { height:100% } has no
     reference and bs-col grows unbounded, preventing scroll. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 12px 0 8px;
}
/* kept for backward compat but now a no-op */
.yearly-snap-item--flex {
  display: flex;
  flex-direction: column;
}

/* scroll container must be a flex column so 100% on children = visible height */
.yearly-snap-scroll {
  display: flex;
  flex-direction: column;
}

/* ── Page 1 compact overrides ── */
#yearly-page1 .summary-grid {
  gap: 5px;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
#yearly-page1 .summary-grid .card {
  padding: 8px 14px !important;
}
#yearly-page1 .summary-grid .icon-box {
  width: 34px !important; height: 34px !important;
}
#yearly-page1 .summary-grid .big-num { font-size: 15px !important; }
#yearly-page1 .summary-grid .label  { font-size: 9px !important; margin-bottom: 1px !important; }
#yearly-page1 .section-header       { margin: 5px 0 4px !important; flex-shrink: 0; }
#yearly-page1 .section-header h3    { font-size: 13px !important; }
#yearly-page1 .bs-col               { gap: 3px !important; }
#yearly-page1 .bs-header            { font-size: 11px !important; padding-bottom: 3px !important; margin-bottom: 2px !important; }
#yearly-page1 .bs-outer-header      { padding: 5px 10px !important; margin-bottom: 0 !important; flex-shrink: 0; }
#yearly-page1 .bs-outer-header strong { font-size: 12px !important; }
#yearly-page1 .bs-outer-header .fw  { font-size: 13px !important; }
#yearly-page1 .bs-total {
  padding: 11px 16px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  flex-shrink: 0;
  border-radius: 12px;
}

/* ── page1 core layout: flex column, balance-sheet fills all remaining space ── */
#yearly-page1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── CRITICAL: section#balance-sheet-section is the direct flex child of
   #yearly-page1, not .balance-sheet-grid. Without this, the height chain
   breaks and bs-col's overflow-y:auto never activates. ── */
#yearly-page1 #balance-sheet-section {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* section-header inside balance-sheet-section must not stretch */
#yearly-page1 #balance-sheet-section > .section-header {
  flex-shrink: 0;
}

#yearly-page1 .balance-sheet-grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  /* overflow:clip prevents grid bleed without creating a new scroll context,
     so bs-col's overflow-y:auto scrollbar works correctly */
  overflow: clip;
}

/* Each bs-col is a flex column, children share height equally */
#yearly-page1 .bs-col {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* REQUIRED for overflow-y: auto to work inside a grid container */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px; /* Space for scrollbar */
}

/* Let bs-outer-group size by its content, so expanding it pushes others down */
#yearly-page1 .bs-col > .bs-outer-group {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 8px; /* Maintain spacing since it doesn't stretch anymore */
}

#yearly-page1 .bs-col > .bs-total {
  flex: 0 0 auto;
  display: flex;
}

#yearly-page1 .bs-col > .bs-ref-wrapper {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* bs-outer-header row: fixed height, never shrinks */
#yearly-page1 .bs-col > .bs-outer-group > .bs-outer-header {
  flex-shrink: 0;
}

/* bs-outer-body: hidden by default (JS toggles), grows when open */
/* NOTE: Do NOT set overflow:visible here — that breaks the bs-col scroll container.
   Default overflow (visible on block) is fine; bs-col handles the scroll. */
#yearly-page1 .bs-col > .bs-outer-group > .bs-outer-body {
  overflow: unset;
}

/* bs-total: horizontal layout like dashboard */
#yearly-page1 .bs-col > .bs-total {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: auto !important;
}

/* bs-ref-wrapper: h3 fixed, card stretches */
#yearly-page1 .bs-col > .bs-ref-wrapper > h3 {
  flex-shrink: 0;
  margin-bottom: 6px !important;
}
#yearly-page1 .bs-col > .bs-ref-wrapper > .excluded-ref {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ── Page 2: table fills remaining height, thin internal scrollbar ── */
#yearly-page2 .section-header {
  flex-shrink: 0;
  margin: 0 0 8px !important;
}
#yearly-page2 .yearly-table-container {
  flex: 1;
  min-height: 0;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#yearly-page2 .yearly-table-scroll-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto !important;
}
#yearly-page2 .yearly-table-scroll-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
#yearly-page2 .yearly-table-scroll-wrapper::-webkit-scrollbar-thumb {
  background: rgba(128,128,128,0.3);
  border-radius: 4px;
}
#yearly-page2 .yearly-table-scroll-wrapper::-webkit-scrollbar-track { background: transparent; }

/* ── yearly 頁加入 one-page-layout 後，保留 Glass 原始 padding ── */
body.one-page-layout.theme-glass .page-content:has(.yearly-snap-page) {
  padding: 24px 32px !important;
  overflow: hidden !important;
}
body.one-page-layout:not(.theme-glass):not(.theme-stardust) .page-content:has(.yearly-snap-page) {
  padding: 24px 32px !important;
  overflow: hidden !important;
}
body.one-page-layout.theme-stardust .page-content:has(.yearly-snap-page) {
  padding: 20px 24px !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   月收支明細 — 2-page scroll-snap layout
   ══════════════════════════════════════════════════════════════ */

.monthly-snap-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.monthly-snap-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,0.35) transparent;
}
.monthly-snap-scroll::-webkit-scrollbar { width: 6px; }
.monthly-snap-scroll::-webkit-scrollbar-thumb {
  background: rgba(128,128,128,0.35);
  border-radius: 6px;
}
.monthly-snap-scroll::-webkit-scrollbar-track { background: transparent; }

.monthly-snap-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 16px;
}
.monthly-snap-item--flex {
  display: flex;
  flex-direction: column;
}

/* Page 2: transaction table card fills remaining height */
.monthly-snap-item--flex .card.table-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.monthly-snap-item--flex .table-toolbar {
  flex-shrink: 0;
}
.monthly-snap-item--flex .table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Page 1: chart-grid fills snap page height */
.monthly-snap-item:not(.monthly-snap-item--flex) .chart-grid {
  height: calc(100% - 0px);
}

/* Restore page-content padding for monthly under one-page-layout */
body.one-page-layout.theme-glass .page-content:has(.monthly-snap-page) {
  padding: 24px 32px !important;
  overflow: hidden !important;
}
body.one-page-layout:not(.theme-glass):not(.theme-stardust) .page-content:has(.monthly-snap-page) {
  padding: 24px 32px !important;
  overflow: hidden !important;
}
body.one-page-layout.theme-stardust .page-content:has(.monthly-snap-page) {
  padding: 20px 24px !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
   投資頁 2-page snap-scroll layout
   ═══════════════════════════════════════════════════════════════ */

.inv-snap-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.inv-snap-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,0.3) transparent;
}
.inv-snap-scroll::-webkit-scrollbar { width: 5px; }
.inv-snap-scroll::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.3); border-radius: 6px; }
.inv-snap-scroll::-webkit-scrollbar-track { background: transparent; }

.inv-snap-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Page 2 (table) uses the existing overflow-auto card */
.inv-snap-item--table {
  overflow: hidden;
}
.inv-snap-item--table .card {
  flex: 1;
  min-height: 0;
  overflow: auto !important;
}

/* ── 圖表切換標籤 ── */
.inv-chart-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.inv-chart-tab {
  padding: 8px 18px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  background: rgba(128,128,128,0.1);
  color: var(--text-secondary, rgba(100,116,139,0.85));
  transition: all 0.18s;
  white-space: nowrap;
}
.inv-chart-tab.active {
  background: rgba(20,184,166,0.18);
  color: var(--color-teal, #14b8a6);
}
body.theme-glass .inv-chart-tab {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.08);
}
body.theme-glass .inv-chart-tab.active {
  background: rgba(20,184,166,0.22);
}

/* ── 圖表面板 ── */
.inv-chart-panels {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.inv-chart-panel {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
}
.inv-chart-panel.active {
  display: flex;
}
.inv-chart-panel > div[id] {
  flex: 1;
  min-height: 0;
}

/* 圖表 meta 行 */
.inv-chart-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 8px;
}
.inv-chart-badge {
  font-size: 15px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 16px;
}
.inv-chart-badge.teal {
  background: var(--teal-light);
  color: var(--teal);
}
.inv-chart-hint {
  font-size: 12px;
  color: var(--text-gray);
  opacity: 0.7;
}

/* page-content padding for inv under one-page-layout */
body.one-page-layout.theme-glass .page-content:has(.inv-snap-page) {
  padding: 20px 24px !important;
  overflow: hidden !important;
}
body.one-page-layout:not(.theme-glass):not(.theme-stardust) .page-content:has(.inv-snap-page) {
  padding: 24px 32px !important;
  overflow: hidden !important;
}
body.one-page-layout.theme-stardust .page-content:has(.inv-snap-page) {
  padding: 20px 24px !important;
  overflow: hidden !important;
}

/* ─── end 投資頁 snap layout ─── */

/* ═══════════════════════════════════════════════════════════════
   字體放大補丁 — 投資明細、年度收支、交易清單
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. 投資明細：持股名稱、持有量、數值、損益率 ── */
.ticker-text-label {
  font-size: clamp(17px, 2.8vw, 22px) !important;
}

/* 類型 badge-pill：保留原有豎排方塊形式，只放大字 */
.ticker-icon {
  width: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
}
.ticker-icon-lg {
  width: 64px !important;
  height: 64px !important;
  font-size: 15px !important;
}

/* badge-pill（橫排）：加大 */
.badge-pill {
  font-size: 14px !important;
  padding: 4px 12px !important;
}

/* 持有量、成本、現值 stacked */
.stacked-val {
  line-height: 1.6 !important;
}
.val-sub {
  font-size: 14px !important;
}
.val-main {
  font-size: 17px !important;
}

/* 損益率 */
.profit-val {
  font-size: 19px !important;
}

/* 投資表格 thead */
table.inv-main-table thead th,
.inv-main-table thead th {
  font-size: 13px !important;
  padding: 14px 16px !important;
}

/* 投資表格 tbody td */
table.inv-main-table tbody td,
.inv-main-table tbody td {
  padding: 16px 16px !important;
  font-size: 16px !important;
}

/* ── 2. 交易清單 tx-table ── */
.tx-table thead th {
  font-size: 13px !important;
  padding: 14px 20px !important;
  letter-spacing: .06em !important;
}
.tx-table tbody td {
  padding: 14px 20px !important;
  font-size: 16px !important;
}

/* glass 主題 tx-table */
body.theme-glass .tx-table thead th {
  font-size: 13px !important;
}
body.theme-glass .tx-table tbody td {
  font-size: 16px !important;
}

/* ── 3. 年度收支 yearly-table ── */
.yearly-table thead th {
  font-size: 13px !important;
  padding: 14px 16px !important;
}
.yearly-table td {
  padding: 13px 16px !important;
  font-size: 16px !important;
}
.section-header-row td {
  font-size: 13px !important;
}

/* glass 主題 yearly-table */
body.theme-glass .yearly-table thead th {
  font-size: 13px !important;
}

/* ── 4. 年度收支：summary 大數字（label / big-num）── */
.label {
  font-size: 13px !important;
}
.big-num {
  font-size: 24px !important;
}
body.theme-glass .big-num {
  font-size: 24px !important;
}

/* ── 5. 資產負債表 bs-header / bs-total ── */
.bs-header {
  font-size: 15px !important;
}
.bs-total {
  font-size: 16px !important;
}

/* ── 6. 通用 badge（counts、狀態標籤）── */
.badge {
  font-size: 13px !important;
  padding: 4px 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
   字體放大補丁 v2 — bs-outer-header 對齊 bs-total 大小
   圈起來的流動資產/投資資產/預算資產/信用卡列放大到與總資產同級
   ═══════════════════════════════════════════════════════════════ */

/* bs-outer-header 列標籤（流動資產、投資資產、預算資產、信用卡） */
.bs-outer-header strong {
  font-size: 18px !important;
}

/* bs-outer-header 列金額 */
.bs-outer-header .fw {
  font-size: 20px !important;
}

/* bs-outer-header 整列加高讓字有空間呼吸 */
.bs-outer-header {
  padding: 12px 16px !important;
}

/* icon-box 稍微放大以配合 */
.bs-outer-header .icon-box.sm {
  width: 40px !important;
  height: 40px !important;
  font-size: 18px !important;
}

/* bs-total（總資產 / 總負債）對齊放大 */
.bs-total {
  font-size: 18px !important;
  padding: 12px 16px !important;
}

/* bs-header 分類標題（資產 Assets / 負債 Liabilities） */
.bs-header {
  font-size: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════
   字體補丁 v3 — 黃框(bs-outer-header)對齊綠框(account-row)
   ═══════════════════════════════════════════════════════════════ */

/* 黃框：標籤文字對齊子列 .fw（body 14px）*/
.bs-outer-header strong {
  font-size: 16px !important;
}

/* 黃框：金額對齊子列金額 */
.bs-outer-header .fw {
  font-size: 16px !important;
}

/* 子列（永豐台幣等）.fw 也放大到相同 16px */
.account-row .fw {
  font-size: 16px !important;
}

/* 子列 TWD / currency 副標 */
.account-row .text-sm.text-gray {
  font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════════
   字體補丁 v4 — #yearly-page1 內強制對齊 account-row 大小
   ID 選擇器優先級高，需要在此層蓋過 v3
   ═══════════════════════════════════════════════════════════════ */

/* 黃框標籤（流動資產、投資資產、預算資產、信用卡）對齊永豐台幣 */
#yearly-page1 .bs-outer-header strong {
  font-size: 14px !important;
}

/* 黃框金額對齊子列金額 */
#yearly-page1 .bs-outer-header .fw {
  font-size: 14px !important;
}

/* 黃框整列 padding 收窄，對齊 account-row 高度 */
#yearly-page1 .bs-outer-header {
  padding: 8px 10px !important;
}

/* icon-box 配合縮小 */
#yearly-page1 .bs-outer-header .icon-box.sm {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   字體補丁 v5 — 完整性確認，修正所有被容器壓縮的字體
   優先級策略：全部加 #yearly-page1 前綴確保蓋過 ID 選擇器
   ═══════════════════════════════════════════════════════════════ */

/* ── A. summary 上方：年度總收入/總支出/結餘 ── */
/* label（年度總收入 等小標）*/
#yearly-page1 .summary-grid .label {
  font-size: 11px !important;
  margin-bottom: 2px !important;
}
/* big-num（金額大字）*/
#yearly-page1 .summary-grid .big-num {
  font-size: 18px !important;
}
/* summary card padding 還原讓字有空間 */
#yearly-page1 .summary-grid .card {
  padding: 10px 16px !important;
}

/* ── B. 資產負債表 Balance Sheet 標題列 ── */
/* "資產負債表 Balance Sheet" section-header h3 */
#yearly-page1 .section-header h3 {
  font-size: 14px !important;
}

/* ── C. bs-header：資產(Assets) / 負債(Liabilities) 分類標題 ── */
#yearly-page1 .bs-header {
  font-size: 13px !important;
  padding-bottom: 4px !important;
  margin-bottom: 3px !important;
}

/* ── D. bs-outer-header：流動資產/投資資產/預算資產/信用卡 ── */
/* 標籤文字 */
#yearly-page1 .bs-outer-header strong {
  font-size: 14px !important;
}
/* 金額 */
#yearly-page1 .bs-outer-header .fw {
  font-size: 14px !important;
}
/* 整列上下 padding */
#yearly-page1 .bs-outer-header {
  padding: 9px 12px !important;
}
/* icon-box */
#yearly-page1 .bs-outer-header .icon-box.sm {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
}

/* ── E. account-row：永豐台幣/玉山台幣 等子列 ── */
/* 帳戶名稱（主文字，繼承 body，確保不被壓） */
#yearly-page1 .account-row {
  font-size: 14px !important;
  padding: 9px 12px !important;
}
/* 金額 .fw */
#yearly-page1 .account-row .fw {
  font-size: 14px !important;
}
/* 副標（TWD / USD） */
#yearly-page1 .account-row .text-sm.text-gray {
  font-size: 12px !important;
}

/* ── F. bs-total：總資產 / 總負債 ── */
#yearly-page1 .bs-total {
  font-size: 15px !important;
  padding: 10px 14px !important;
}

/* ── G. bs-col gap 稍微收緊確保一頁顯示 ── */
#yearly-page1 .bs-col {
  gap: 0px !important;
}
#yearly-page1 .bs-col > .bs-outer-group {
  margin-bottom: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   欄寬拖曳調整 — tx-table resizable columns
   ═══════════════════════════════════════════════════════════════ */
.tx-table thead th {
  position: relative;
}
.col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 6px;
  cursor: col-resize;
  user-select: none;
  z-index: 10;
  border-right: 2px solid transparent;
  transition: border-color .15s;
}
.col-resize-handle:hover,
.col-resize-handle.resizing {
  border-right-color: var(--teal-dark, #0d9488);
}

/* 篩選彈窗：label 每個獨佔一行，input 緊跟在 label 下 */
.filter-body label.label {
  grid-column: auto;
  margin-bottom: 0;
}
.filter-body input.input {
  grid-column: auto;
  margin-top: 0;
}

/* filter-field：每個欄位獨立 div，flex 直排 */
.filter-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-field .label {
  margin: 0 !important;
  font-size: 12px;
  font-weight: 700;
}
.filter-field .input {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   投資明細 — 圖表時間區間切換按鈕
   ═══════════════════════════════════════════════════════════════ */
.inv-range-group {
  display: flex;
  gap: 4px;
  background: var(--bg-sidebar, rgba(0,0,0,0.05));
  padding: 4px;
  border-radius: 20px;
}
.inv-range-btn, .inv-range-btn-refresh {
  border: none;
  background: transparent;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-text, rgba(255, 255, 255, 0.6));
  cursor: pointer;
  transition: all 0.2s;
}
.inv-range-btn:hover, .inv-range-btn-refresh:hover {
  color: var(--sidebar-text-active, #fff);
}
.inv-range-btn.active {
  background: var(--bg-card, #fff);
  color: var(--teal, #14b8a6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── 淨資產/收支切換按鈕視覺修正與主題適配 ── */
body:not(.theme-handdrawn-pencil):not(.theme-handdrawn-crayon) #nw-view-toggle-btn {
  color: var(--text-primary, #374151);
  background: var(--gray-100, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--gray-200, rgba(0, 0, 0, 0.08));
}
body:not(.theme-handdrawn-pencil):not(.theme-handdrawn-crayon) #nw-view-toggle-btn:hover {
  background: var(--gray-200, rgba(0, 0, 0, 0.1));
  color: var(--text-primary, #111827);
}
body.theme-glass #nw-view-toggle-btn {
  color: var(--glass-text, #1e293b);
  background: rgba(var(--glass-color-rgb, 255, 255, 255), 0.2) !important;
  border: 1px solid rgba(var(--glass-color-rgb, 255, 255, 255), 0.3) !important;
}
body.theme-glass #nw-view-toggle-btn:hover {
  background: rgba(var(--glass-color-rgb, 255, 255, 255), 0.4) !important;
}



/* ══════════════════════════════════════════════════════════════
   投資報酬 Badge 主題化配色
   元素：#inv-return-card（可點擊卡片）、#inv-return-cagr（XIRR 標籤）
   設計原則：與 .inv-range-group 視覺語言對齊，使用相同的 --bg-sidebar 色票
   ══════════════════════════════════════════════════════════════ */

/* ── 共用基礎：reset button 預設樣式 ── */
#inv-return-card {
  border: none;
  outline: none;
  font-family: inherit;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* ════════════════════════════════
   ① 薄荷森林（預設主題）
   --bg-sidebar = var(--teal-dark) = #0f766e
   對齊 inv-range-group：直接用 var(--bg-sidebar)，與 stardust/glass 統一策略
   ════════════════════════════════ */
body:not(.theme-stardust):not(.theme-glass):not(.theme-handdrawn-pencil):not(.theme-handdrawn-crayon) #inv-return-card {
  background: var(--bg-sidebar) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:not(.theme-stardust):not(.theme-glass):not(.theme-handdrawn-pencil):not(.theme-handdrawn-crayon) #inv-return-card:hover {
  background: var(--teal-dark) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
body:not(.theme-stardust):not(.theme-glass) #inv-return-main {
  /* 顏色由 JS 動態寫入，保持不動 */
}
body:not(.theme-stardust):not(.theme-glass) #inv-return-sub {
  color: rgba(255, 255, 255, 0.72) !important;
}
body:not(.theme-stardust):not(.theme-glass):not(.theme-handdrawn-pencil):not(.theme-handdrawn-crayon) #inv-return-cagr {
  background: var(--bg-sidebar) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.14) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ════════════════════════════════
   ② 星塵（Stardust）
   --bg-sidebar = var(--teal-dark) = #42628C（Deep Space Blue）
   對齊 inv-range-group 的背景色：直接用 var(--bg-sidebar)
   文字用星塵亮色系
   ════════════════════════════════ */
body.theme-stardust #inv-return-card {
  background: var(--bg-sidebar) !important;
  border: 1px solid rgba(29, 242, 221, 0.18) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.theme-stardust #inv-return-card:hover {
  background: rgba(50, 74, 107, 0.95) !important; /* 星塵深藍 hover，不用 --sidebar-hover-bg（該變數是白色半透明） */
  border-color: rgba(29, 242, 221, 0.35) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}
body.theme-stardust #inv-return-sub {
  color: rgba(255, 255, 255, 0.65) !important;
}
body.theme-stardust #inv-return-cagr {
  background: var(--bg-sidebar) !important;
  border: 1px solid rgba(29, 242, 221, 0.18) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.20) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ════════════════════════════════
   ③ 磨砂黑玻（theme-glass + glass-dark-mode）
   glassVal ≤ 160，--bg-sidebar = rgba(glass-color-rgb, 0.12)
   對齊 inv-range-group：直接繼承 var(--bg-sidebar)
   文字用白色亮系
   ════════════════════════════════ */
body.theme-glass.glass-dark-mode #inv-return-card {
  background: var(--bg-sidebar) !important;
  border: 1px solid rgba(var(--glass-color-rgb, 255,255,255), 0.20) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
body.theme-glass.glass-dark-mode #inv-return-card:hover {
  background: var(--sidebar-hover-bg, rgba(var(--glass-color-rgb,255,255,255), 0.25)) !important;
  border-color: rgba(var(--glass-color-rgb, 255,255,255), 0.32) !important;
}
body.theme-glass.glass-dark-mode #inv-return-sub {
  color: rgba(255, 255, 255, 0.60) !important;
}
body.theme-glass.glass-dark-mode #inv-return-cagr {
  background: var(--bg-sidebar) !important;
  border: 1px solid rgba(var(--glass-color-rgb, 255,255,255), 0.16) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.20) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* ════════════════════════════════
   ④ 磨砂白玻（theme-glass，無 glass-dark-mode）
   glassVal > 160，--bg-sidebar = rgba(glass-color-rgb, 0.12)
   對齊 inv-range-group：直接繼承 var(--bg-sidebar)
   文字用深色系
   ════════════════════════════════ */
body.theme-glass:not(.glass-dark-mode) #inv-return-card {
  background: var(--bg-sidebar) !important;
  border: 1px solid rgba(var(--glass-color-rgb, 255,255,255), 0.30) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), inset 0 1.5px 2px rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}
body.theme-glass:not(.glass-dark-mode) #inv-return-card:hover {
  background: var(--sidebar-hover-bg, rgba(var(--glass-color-rgb,255,255,255), 0.25)) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.10), inset 0 1.5px 2px rgba(255,255,255,0.65) !important;
}
body.theme-glass:not(.glass-dark-mode) #inv-return-main {
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
body.theme-glass:not(.glass-dark-mode) #inv-return-sub {
  color: var(--glass-ui-text-sub, rgba(15, 23, 42, 0.60)) !important;
}
body.theme-glass:not(.glass-dark-mode) #inv-return-cagr {
  background: var(--bg-sidebar) !important;
  border: 1px solid rgba(var(--glass-color-rgb, 255,255,255), 0.24) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.40) !important;
  color: var(--glass-ui-text-sub, rgba(15, 23, 42, 0.70)) !important;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

/* User Request: Table Headers Sticky & Match Sidebar Color */
.tx-table thead th,
.yearly-table thead th,
.inv-main-table thead th,
.inv-th {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background: var(--bg-sidebar, #0f766e) !important;
  color: var(--sidebar-text-active, #fff) !important;
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}

/* For Glass Theme, use glass sidebar background and filter */
body.theme-glass .tx-table thead th,
body.theme-glass .yearly-table thead th,
body.theme-glass .inv-main-table thead th,
body.theme-glass .inv-th {
  background: var(--glass-bg, rgba(255,255,255,0.13)) !important;
  backdrop-filter: var(--glass-filter, blur(16px) saturate(160%)) !important;
  -webkit-backdrop-filter: var(--glass-filter, blur(16px) saturate(160%)) !important;
  color: var(--sidebar-text-active, #fff) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.15);
}

/* ─────────────────────────────────────────────────────────────
   User Request: Dropdown Select Options & Filter Modal Colors 
   for 3 different themes (Default Teal, Stardust, and Glass)
   ───────────────────────────────────────────────────────────── */

/* ─── 1. select option 配色與字體優化 ─── */
/* 預設翠綠主題 */
select option {
  background-color: #ffffff !important;
  color: #0f766e !important; /* 重點字非常清晰的深翠綠 */
  font-weight: 700 !important;
}
/* 星塵主題 */
.theme-stardust select option {
  background-color: #1e293b !important; /* 深 slate 藍底 */
  color: #1DF2DD !important; /* 螢光青字，重點字極致清晰 */
  font-weight: 700 !important;
}
/* 玻璃主題 */
.theme-glass select option {
  background-color: #ffffff !important;
  color: #0f172a !important; /* 白底深 slate 灰字 */
  font-weight: 700 !important;
}
body.theme-glass.glass-dark-mode select option {
  background-color: #0f172a !important;
  color: #f8fafc !important; /* 深色玻璃底，白字 */
  font-weight: 700 !important;
}

/* ─── 2. 篩選條件 Modal 配合主題配色調整 ─── */

/* [星塵主題下] 篩選條件彈窗 */
.theme-stardust .filter-box {
  background: #24344d !important; /* 星塵深藍底色 */
  border: 1px solid rgba(29, 242, 221, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.35) !important;
}
.theme-stardust .filter-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #1DF2DD !important; /* 標題霓虹青 */
}
.theme-stardust .filter-body .label {
  color: #94a3b8 !important; /* 淡灰藍色標籤 */
}
.theme-stardust .filter-body .input {
  background: #1e293b !important; /* 輸入框深 Slate 藍 */
  border: 1px solid #475569 !important;
  color: #ffffff !important;
}
.theme-stardust .filter-body .input:focus {
  border-color: #1DF2DD !important;
  box-shadow: 0 0 0 2px rgba(29, 242, 221, 0.2) !important;
}
.theme-stardust .filter-footer {
  background: #1e293b !important; /* 深底頁尾 */
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.theme-stardust .btn-text {
  color: #94a3b8 !important;
}
.theme-stardust .btn-text:hover {
  color: #1DF2DD !important;
}

/* [玻璃主題下] 篩選條件彈窗 (visionOS 雙層模糊高質感) */
.theme-glass .filter-box {
  background: var(--glass-primary-bg) !important;
  backdrop-filter: blur(var(--glass-primary-blur, 28px)) saturate(150%) !important;
  -webkit-backdrop-filter: blur(var(--glass-primary-blur, 28px)) saturate(150%) !important;
  border: var(--glass-primary-border) !important;
  box-shadow: var(--glass-primary-shadow) !important;
  color: var(--text-primary) !important;
}
.theme-glass .filter-header {
  border-bottom: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.2) !important;
  color: var(--text-primary) !important;
}
.theme-glass .filter-body .label {
  color: var(--text-secondary) !important;
}
.theme-glass .filter-body .input {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.15) !important;
  border: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.25) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.theme-glass .filter-body .input::placeholder {
  color: var(--text-tertiary) !important;
  opacity: 0.6;
}
.theme-glass .filter-body .input:focus {
  background: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.22) !important;
  border-color: rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.45) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}
.theme-glass .filter-footer {
  background: transparent !important;
  border-top: 1px solid rgba(var(--glass-ui-color-rgb, 255, 255, 255), 0.2) !important;
}
.theme-glass .btn-text {
  color: var(--text-secondary) !important;
}
.theme-glass .btn-text:hover {
  color: var(--text-primary) !important;
}

/* [預設翠綠主題下] 篩選條件彈窗 */
.filter-box {
  border: 1px solid var(--gray-200);
}
.filter-header strong {
  color: var(--teal-dark) !important; /* 翠綠標題 */
}
.filter-body .label {
  color: var(--teal-dark) !important;
  font-weight: 700;
}
.filter-body .input {
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.filter-body .input:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px var(--teal-light) !important;
}

/* ── 年度明細未來預估金額特殊樣式 (極簡高雅主題色版) ── */

/* 1. 預設翠綠主題：莫蘭迪綠色 */
.future-amount-only {
  color: #8ca399 !important; /* 莫蘭迪綠色 */
  font-weight: 700;
  cursor: help;
}
.future-amount-mixed {
  color: #6b8276 !important; /* 稍深莫蘭迪綠色 */
  font-weight: 700;
  cursor: help;
}

/* 2. 星塵主題：淡藍灰色 */
.theme-stardust .future-amount-only {
  color: #94a3b8 !important; /* 淡藍灰色 */
}
.theme-stardust .future-amount-mixed {
  color: #64748b !important; /* 稍深藍灰色 */
}

/* 3. 玻璃主題：已發生與未發生顏色對調 */

/* 白玻 (White Glass) - 預設 */
body.theme-glass .yearly-table td:not(.text-red):not(.text-teal):not(.text-indigo) {
  color: var(--glass-ui-text) !important; /* 已發生：清楚的深灰色 */
}
body.theme-glass .future-amount-only {
  color: rgba(15, 23, 42, 0.45) !important; /* 未發生：淡灰色 */
}
body.theme-glass .future-amount-mixed {
  color: rgba(15, 23, 42, 0.65) !important; /* 部分發生：中灰色 */
}

/* 黑玻 (Dark Glass) */
body.theme-glass.glass-dark-mode .yearly-table td:not(.text-red):not(.text-teal):not(.text-indigo) {
  color: var(--glass-ui-text) !important; /* 已發生：清楚的白色 */
}
body.theme-glass.glass-dark-mode .future-amount-only {
  color: rgba(255, 255, 255, 0.45) !important; /* 未發生：淡白色 */
}
body.theme-glass.glass-dark-mode .future-amount-mixed {
  color: rgba(255, 255, 255, 0.65) !important; /* 部分發生：中白色 */
}

/* ── 各主題下未發生小計使用同主題色較淡色調 ── */

/* 1. 預設翠綠主題 */
td.text-teal .future-amount-only {
  color: #a3bdae !important; /* 較淡翠綠色 */
}
td.text-teal .future-amount-mixed {
  color: #6b8276 !important; /* 稍深較淡翠綠色 */
}
td.text-red .future-amount-only {
  color: #e5b4b4 !important; /* 較淡玫瑰紅色 */
}
td.text-red .future-amount-mixed {
  color: #bca3a3 !important; /* 稍深較淡玫瑰紅色 */
}
tr.indigo td .future-amount-only {
  color: #b4c3e5 !important; /* 較淡靛藍色 */
}
tr.indigo td .future-amount-mixed {
  color: #a3b3bc !important; /* 稍深較淡靛藍色 */
}

/* 2. 星塵主題 */
body.theme-stardust td.text-teal .future-amount-only {
  color: #86efac !important; /* 較淡翡翠綠 */
}
body.theme-stardust td.text-teal .future-amount-mixed {
  color: #34d399 !important;
}
body.theme-stardust td.text-red .future-amount-only {
  color: #fda4af !important; /* 較淡粉紅色 */
}
body.theme-stardust td.text-red .future-amount-mixed {
  color: #f472b6 !important;
}
body.theme-stardust tr.indigo td .future-amount-only {
  color: #c7d2fe !important; /* 較淡靛藍色 */
}
body.theme-stardust tr.indigo td .future-amount-mixed {
  color: #a5b4fc !important;
}

/* 3. 玻璃主題 (白玻) */
body.theme-glass:not(.glass-dark-mode) td.text-teal .future-amount-only {
  color: rgba(8, 145, 178, 0.45) !important;
}
body.theme-glass:not(.glass-dark-mode) td.text-teal .future-amount-mixed {
  color: rgba(8, 145, 178, 0.65) !important;
}
body.theme-glass:not(.glass-dark-mode) td.text-red .future-amount-only {
  color: rgba(220, 38, 38, 0.45) !important;
}
body.theme-glass:not(.glass-dark-mode) td.text-red .future-amount-mixed {
  color: rgba(220, 38, 38, 0.65) !important;
}
body.theme-glass:not(.glass-dark-mode) tr.indigo td .future-amount-only {
  color: rgba(67, 56, 202, 0.45) !important;
}
body.theme-glass:not(.glass-dark-mode) tr.indigo td .future-amount-mixed {
  color: rgba(67, 56, 202, 0.65) !important;
}

/* 3. 玻璃主題 (黑玻) */
body.theme-glass.glass-dark-mode td.text-teal .future-amount-only {
  color: rgba(125, 211, 252, 0.45) !important; /* 較淡青藍 */
}
body.theme-glass.glass-dark-mode td.text-teal .future-amount-mixed {
  color: rgba(125, 211, 252, 0.65) !important;
}
body.theme-glass.glass-dark-mode td.text-red .future-amount-only {
  color: rgba(251, 113, 133, 0.45) !important; /* 較淡粉紅 */
}
body.theme-glass.glass-dark-mode td.text-red .future-amount-mixed {
  color: rgba(251, 113, 133, 0.65) !important;
}
body.theme-glass.glass-dark-mode tr.indigo td .future-amount-only {
  color: rgba(165, 180, 252, 0.45) !important;
}
body.theme-glass.glass-dark-mode tr.indigo td .future-amount-mixed {
  color: rgba(165, 180, 252, 0.65) !important;
}

/* ─────────────────────────────────────────────────────────────
   🤖 AI Assistant FAB & Chat Panel Styling
   ───────────────────────────────────────────────────────────── */

/* --- 1. AI Floating Action Button (FAB) --- */
.ai-assistant-fab {
  position: fixed;
  right: 24px;
  bottom: 100px;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 25px rgba(0,0,0,0.20);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--btn-primary-text);
}
.ai-assistant-fab:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.28);
}
.ai-assistant-fab:active {
  transform: scale(0.95);
}
.ai-assistant-fab svg {
  width: 28px;
  height: 28px;
  transition: transform 0.4s ease;
}
.ai-assistant-fab:hover svg {
  transform: rotate(15deg);
}

/* 懸浮按鈕平滑呼吸燈邊框效果 */
@keyframes ai-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.25); }
  70% { box-shadow: 0 0 0 12px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.ai-assistant-fab.pulse-active {
  animation: ai-pulse 2s infinite;
}

/* --- 📝 Monthly Note FAB & Panel Styling --- */
.monthly-note-fab {
  position: fixed;
  right: 24px;
  bottom: 176px; /* 100px (AI Assistant FAB) + 76px */
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 25px rgba(0,0,0,0.20);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 0;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: #ffffff;
}
.monthly-note-fab.hidden {
  display: none !important;
}
.monthly-note-fab:hover {
  transform: scale(1.08);
}
.monthly-note-fab:active {
  transform: scale(0.95);
}
.monthly-note-fab svg {
  width: 24px;
  height: 24px;
  transition: transform 0.4s ease;
}
.monthly-note-fab:hover svg {
  transform: rotate(10deg);
}

/* 記事本 Badge dot */
.monthly-note-fab .note-badge-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background-color: #ef4444;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  z-index: 10;
}
.monthly-note-fab .note-badge-dot.hidden {
  display: none !important;
}

/* 記事本面板頂部日期文字與圖示樣式 */
#monthly-note-current-date {
  font-size: 11px;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  background: var(--teal-light);
  color: var(--teal-dark, #0d9488);
}

/* 當月記事本對話視窗 */
.monthly-note-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 33.33%;
  min-width: 380px;
  height: 100%;
  max-height: 100vh;
  border-radius: 24px 0 0 24px;
  z-index: 10005;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-right: none;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  will-change: transform, opacity;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
}
.monthly-note-panel.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.monthly-note-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
}
.monthly-note-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.monthly-note-close {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  transition: background 0.2s;
}
.monthly-note-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.monthly-note-textarea {
  width: 100%;
  height: 100%;
  flex: 1;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
}

/* --- 2. AI Chat Panel --- */
.ai-chat-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 33.33%;
  min-width: 380px;
  height: 100%;
  max-height: 100vh;
  border-radius: 24px 0 0 24px;
  z-index: 10005;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-right: none;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  /* 使用 premium 的 slide-in 滑動動畫 */
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  will-change: transform, opacity;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(25px) saturate(120%);
  -webkit-backdrop-filter: blur(25px) saturate(120%);
}
.ai-chat-panel.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* --- 3. Chat Panel Components --- */
.ai-chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
}
.ai-chat-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.ai-chat-header-title span {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--teal-light);
  color: var(--teal-light, #2dd4bf);
  font-weight: 700;
}
.ai-chat-close {
  cursor: pointer;
  opacity: 0.7;
  color: #fff;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.ai-chat-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* Message List */
.ai-chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}
/* 自訂磨砂玻璃風滾輪 */
.ai-chat-messages::-webkit-scrollbar {
  width: 5px;
}
.ai-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
.ai-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Message Bubbles */
.ai-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: bubble-fade 0.25s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
  word-wrap: break-word;
}
@keyframes bubble-fade {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--teal) 0%, #0d9488 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}
.ai-msg.ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-msg.system {
  align-self: center;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 12px;
  font-size: 12px;
  max-width: 95%;
  text-align: center;
}

/* 🤖 AI 智慧授權卡片 (Consent Card) */
.ai-consent-card {
  align-self: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px dashed var(--teal);
  border-radius: 18px;
  padding: 16px;
  width: 95%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  animation: bubble-fade 0.3s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}
.ai-consent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-light, #2dd4bf);
  font-weight: 700;
  font-size: 13.5px;
}
.ai-consent-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
.ai-consent-btn-group {
  display: flex;
  gap: 8px;
}
.ai-consent-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ai-consent-btn.confirm {
  background: linear-gradient(135deg, var(--teal) 0%, #0d9488 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}
.ai-consent-btn.confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.18);
}
.ai-consent-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-consent-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Typing Wave Animation (Thinking) */
.ai-typing-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
}
.ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: dot-wave 1.2s infinite ease-in-out;
}
.ai-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); background: var(--teal-light, #2dd4bf); }
}

/* Input Area */
.ai-chat-input-bar {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.45);
}
.ai-chat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: all 0.2s;
}
.ai-chat-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.ai-chat-input:focus {
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px var(--teal-light);
}
.ai-chat-send {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--teal) 0%, #0d9488 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}
.ai-chat-send:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0,0,0,0.18);
}
.ai-chat-send:disabled {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: not-allowed;
  box-shadow: none;
}
.ai-chat-send svg {
  width: 16px;
  height: 16px;
}

/* --- 4. Custom Sparkline/Micro-chart inside chat bubble --- */
.ai-sparkline-container {
  margin-top: 8px;
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px;
  width: 100%;
}
.ai-sparkline-title {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}
.ai-sparkline-canvas {
  width: 100%;
  height: 80px;
  display: block;
}

/* 再生格線紙張底質 */
body.theme-handdrawn-pencil {
  background-color: var(--layer-1, #FAF9F5) !important;
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  color: #2d3748 !important;
}

body.theme-handdrawn-pencil .topbar,
body.theme-handdrawn-pencil .sidebar {
  background: var(--layer-3, #FAF9F5) !important;
  border-color: #2d3748 !important;
}

/* NOTE: 將中間主要卡片 (Layer 3) 與內置小卡片 (Layer 4) 分離 */
body.theme-handdrawn-pencil .card {
  border: 2px solid #2d3748 !important;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow: 4px 4px 0px #2d3748 !important;
  background: var(--layer-3, #ffffff) !important;
}
body.theme-handdrawn-pencil .fintech-ring-card {
  border: 2px solid #2d3748 !important;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow: 4px 4px 0px #2d3748 !important;
  background: var(--layer-4, #ffffff) !important;
}
body.theme-handdrawn-pencil .modal-box,
body.theme-handdrawn-pencil .ai-chat-panel,
body.theme-handdrawn-pencil .filter-box,
body.theme-handdrawn-pencil .dropdown-menu,
body.theme-handdrawn-pencil .owner-select {
  border: 2px solid #2d3748 !important;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow: 4px 4px 0px #2d3748 !important;
  background: var(--layer-3, #ffffff) !important;
}

/* --- 5. Theme Adaption --- */

/* 1. 翠綠主題 (Default Morandi Green) */
body.theme-default .ai-assistant-fab,
body.theme-default .monthly-note-fab {
  background: linear-gradient(135deg, var(--teal) 0%, #0d9488 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,0.20);
}
body.theme-default .ai-msg.user {
  background: linear-gradient(135deg, var(--teal) 0%, #0d9488 100%);
}

/* 2. 星塵主題 (Stardust Purple/Blue Theme) */
body.theme-stardust .ai-assistant-fab,
body.theme-stardust .monthly-note-fab {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.35);
  border-color: rgba(255, 255, 255, 0.15);
}
body.theme-stardust .ai-assistant-fab:hover,
body.theme-stardust .monthly-note-fab:hover {
  box-shadow: 0 15px 30px rgba(99, 102, 241, 0.5);
}
body.theme-stardust .ai-chat-panel,
body.theme-stardust .monthly-note-panel {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-stardust .ai-msg.user {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.15);
}
body.theme-stardust .ai-chat-header-title span {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}
body.theme-stardust #monthly-note-current-date {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}
body.theme-stardust .monthly-note-header-title svg {
  color: #a5b4fc !important;
}
body.theme-stardust .ai-consent-btn.confirm {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* 3. 玻璃主題 - 白玻 (Glass Light Mode) */
body.theme-glass:not(.glass-dark-mode) .ai-assistant-fab,
body.theme-glass:not(.glass-dark-mode) .monthly-note-fab {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #0f172a;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}
body.theme-glass:not(.glass-dark-mode) .ai-assistant-fab:hover,
body.theme-glass:not(.glass-dark-mode) .monthly-note-fab:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.12);
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-panel,
body.theme-glass:not(.glass-dark-mode) .monthly-note-panel {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-header,
body.theme-glass:not(.glass-dark-mode) .monthly-note-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.25);
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-header-title,
body.theme-glass:not(.glass-dark-mode) .monthly-note-header-title {
  color: #0f172a;
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-header-title span,
body.theme-glass:not(.glass-dark-mode) .monthly-note-header-title span {
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-close,
body.theme-glass:not(.glass-dark-mode) .monthly-note-close {
  color: #0f172a;
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-close:hover,
body.theme-glass:not(.glass-dark-mode) .monthly-note-close:hover {
  background: rgba(0, 0, 0, 0.05);
}
body.theme-glass:not(.glass-dark-mode) .monthly-note-textarea {
  color: #0f172a !important;
}
body.theme-glass:not(.glass-dark-mode) .ai-msg.user {
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08);
}
body.theme-glass:not(.glass-dark-mode) .ai-msg.ai {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.5);
  color: #1e293b;
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-input-bar {
  border-top-color: rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.2);
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-input {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-input::placeholder {
  color: rgba(15, 23, 42, 0.4);
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-input:focus {
  border-color: rgba(15, 23, 42, 0.35);
  background: #fff;
}
body.theme-glass:not(.glass-dark-mode) .ai-chat-send {
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
}
body.theme-glass:not(.glass-dark-mode) .ai-consent-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(15, 23, 42, 0.25);
  box-shadow: 0 10px 25px rgba(15,23,42,0.06);
}
body.theme-glass:not(.glass-dark-mode) .ai-consent-header {
  color: #0f172a;
}
body.theme-glass:not(.glass-dark-mode) .ai-consent-body {
  color: #334155;
}
body.theme-glass:not(.glass-dark-mode) .ai-consent-btn.confirm {
  background: rgba(15, 23, 42, 0.85);
}

/* 4. 玻璃主題 - 黑玻 (Glass Dark Mode) */
body.theme-glass.glass-dark-mode .ai-assistant-fab {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
body.theme-glass.glass-dark-mode .ai-assistant-fab:hover {
  background: rgba(15, 23, 42, 0.75);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.45);
}
body.theme-glass.glass-dark-mode .ai-chat-panel {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
body.theme-glass.glass-dark-mode .ai-msg.ai {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
}
body.theme-glass.glass-dark-mode .ai-chat-input-bar {
  background: rgba(15, 23, 42, 0.2);
}
body.theme-glass.glass-dark-mode .ai-chat-input {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-glass.glass-dark-mode .ai-consent-card {
  background: rgba(15, 23, 42, 0.7);
}

/* ── 4a. 玻璃主題 - 黑玻 (Glass Dark Mode) 記事本適配 ── */
body.theme-glass.glass-dark-mode .monthly-note-fab {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
body.theme-glass.glass-dark-mode .monthly-note-fab:hover {
  background: rgba(15, 23, 42, 0.75);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.45);
}
body.theme-glass.glass-dark-mode .monthly-note-panel {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
body.theme-glass.glass-dark-mode .monthly-note-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}
body.theme-glass.glass-dark-mode .monthly-note-header-title {
  color: #fff;
}
body.theme-glass.glass-dark-mode #monthly-note-current-date {
  background: rgba(255, 255, 255, 0.1);
  color: #a5b4fc;
}
body.theme-glass.glass-dark-mode .monthly-note-header-title svg {
  color: #fff !important;
}
body.theme-glass.glass-dark-mode .monthly-note-header-title span {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
body.theme-glass.glass-dark-mode .monthly-note-close {
  color: #fff;
}
body.theme-glass.glass-dark-mode .monthly-note-close:hover {
  background: rgba(255, 255, 255, 0.1);
}
body.theme-glass.glass-dark-mode .monthly-note-textarea {
  color: #fff !important;
}

/* ── 4b. 手繪鉛筆風 (Pencil Theme) 記事本適配 ── */
body.theme-handdrawn-pencil .monthly-note-panel,
body.theme-handdrawn-pencil .monthly-note-fab {
  position: fixed !important;
  box-shadow: 1px 1px 0px #2d3748, 2px 2px 0px #2d3748, 3px 3px 0px #2d3748, 4px 4px 0px #2d3748, 5px 5px 0px #2d3748 !important;
}
body.theme-handdrawn-pencil .monthly-note-fab.active {
  transform: translate(1px, 2px) !important;
  box-shadow: 0px 1px 0px #2d3748 !important;
  background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.06) 5px, rgba(0,0,0,0.06) 7px) !important;
  color: #000000 !important;
}
body.theme-handdrawn-pencil .monthly-note-panel::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px; right: -2.5px; bottom: -2.5px;
  border: 1.5px solid #2d3748;
  border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px;
  pointer-events: none;
  z-index: 10;
}
body.theme-handdrawn-pencil .monthly-note-close::before,
body.theme-handdrawn-pencil .monthly-note-close::after {
  content: none !important;
}
body.theme-handdrawn-pencil .monthly-note-close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #2d3748 !important;
}
body.theme-handdrawn-pencil .monthly-note-close:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
}
body.theme-handdrawn-pencil .monthly-note-panel {
  background: #FAF9F5 !important;
  border: 2px solid #2d3748 !important;
}
body.theme-handdrawn-pencil .monthly-note-body {
  background: #FAF9F5 !important;
}
body.theme-handdrawn-pencil .monthly-note-textarea {
  color: #2d3748 !important;
  background: transparent !important;
}
body.theme-handdrawn-pencil .monthly-note-header {
  background: #FAF9F5 !important;
  border-bottom: 2px solid #2d3748 !important;
}
body.theme-handdrawn-pencil .monthly-note-header-title {
  color: #2d3748 !important;
}
body.theme-handdrawn-pencil .monthly-note-header-title span {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #2d3748 !important;
  border: 1.5px dashed #2d3748 !important;
}
body.theme-handdrawn-pencil .monthly-note-footer {
  background: #FAF9F5 !important;
  border-top: 2px solid #2d3748 !important;
}

/* ── 4c. 手繪蠟筆風 (Crayon Theme) 記事本適配 ── */
body.theme-handdrawn-crayon .monthly-note-panel,
body.theme-handdrawn-crayon .monthly-note-fab {
  position: fixed !important;
}
body.theme-handdrawn-crayon .monthly-note-fab::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 4px !important;
  right: 1px !important;
  bottom: 5px !important;
  background: var(--cb-card, #FFFDF6) !important;
  transform: rotate(-1deg) scale(0.98) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
  transition: background 0.1s ease !important;
}
body.theme-handdrawn-crayon .monthly-note-fab::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  box-shadow: 5px 5px 0px 0px var(--cb-blue) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transition: box-shadow 0.08s ease !important;
}
body.theme-handdrawn-crayon .monthly-note-fab:hover::after {
  box-shadow: 7px 7px 0px 0px var(--cb-blue) !important;
}
body.theme-handdrawn-crayon .monthly-note-fab:active {
  transform: translate(5px, 5px) !important;
}
body.theme-handdrawn-crayon .monthly-note-fab:active::after {
  box-shadow: 0px 0px 0px 0px transparent !important;
}
body.theme-handdrawn-crayon .monthly-note-fab.active {
  background: #3DB890 !important;
  color: #FBF2D0 !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0px 0px var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .monthly-note-fab.active::before {
  background: #3DB890 !important;
}

body.theme-handdrawn-crayon .monthly-note-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
body.theme-handdrawn-crayon .monthly-note-panel::before {
  content: "" !important;
  position: absolute !important;
  top: 5px !important;
  left: 8px !important;
  right: 3px !important;
  bottom: 8px !important;
  background: var(--cb-float, #FFF9E6) !important;
  transform: rotate(0.4deg) scale(0.99) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .monthly-note-panel::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 8px 12px / 10px 8px 12px 6px !important;
  box-shadow: 8px 8px 0px 0px var(--cb-blue, #3B82F6) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body.theme-handdrawn-crayon .monthly-note-body {
  background: var(--cb-float, #FFF9E6) !important;
}
body.theme-handdrawn-crayon .monthly-note-textarea {
  color: var(--cb-ink) !important;
  background: transparent !important;
}
body.theme-handdrawn-crayon .monthly-note-header {
  background: var(--cb-card, #FFFDF6) !important;
  border-bottom: 2px solid var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .monthly-note-header-title {
  color: var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .monthly-note-header-title span {
  background: var(--cb-paper) !important;
  color: var(--cb-ink) !important;
  border: 2px dashed var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .monthly-note-close {
  color: var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .monthly-note-close:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
body.theme-handdrawn-crayon .monthly-note-footer {
  background: var(--cb-card, #FFFDF6) !important;
  border-top: 2px solid var(--cb-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
   莫蘭迪主題補丁 — 未套用色彩的細部元件
   ═══════════════════════════════════════════════════════════════ */

/* ── Modal 表格內文 tbody (圖4/7/8) ── */
[class*="theme-morand"] .modal-box tbody tr { background: var(--white); }
[class*="theme-morand"] .modal-box tbody tr:nth-child(even) { background: var(--gray-50); }
[class*="theme-morand"] .modal-box tbody tr:hover td { background: var(--gray-100) !important; }
[class*="theme-morand"] .modal-box td { border-bottom: 1px solid var(--gray-100); color: var(--text-primary); }
[class*="theme-morand"] .modal-box .data-row:hover td { background: var(--gray-100) !important; }

/* ── nw-table（資產變動明細 圖8）── */
[class*="theme-morand"] .nw-table tbody tr { background: var(--white); }
[class*="theme-morand"] .nw-table tbody tr:nth-child(even) { background: var(--gray-50); }
[class*="theme-morand"] .nw-table td { color: var(--text-primary); border-bottom: 1px solid var(--gray-100); }

/* ── tx-table（收支明細 圖5）── */
[class*="theme-morand"] .tx-table tbody tr { background: var(--white); }
[class*="theme-morand"] .tx-table .row-alt td { background: var(--gray-50) !important; }
[class*="theme-morand"] .tx-table tbody tr:hover td { background: var(--gray-100) !important; }
[class*="theme-morand"] .tx-table thead th { background: var(--gray-50); color: var(--gray-400); border-bottom: 1px solid var(--gray-200); }

/* ── 編輯 Modal 表單 input (圖6) ── */
[class*="theme-morand"] .input,
[class*="theme-morand"] select.input,
[class*="theme-morand"] input[type="text"],
[class*="theme-morand"] input[type="number"],
[class*="theme-morand"] input[type="date"],
[class*="theme-morand"] textarea,
[class*="theme-morand"] .modal-box select,
[class*="theme-morand"] .modal-box input {
  background: var(--gray-50) !important;
  border: 1px solid var(--gray-200) !important;
  color: var(--text-primary) !important;
}
[class*="theme-morand"] .input:focus,
[class*="theme-morand"] .modal-box input:focus,
[class*="theme-morand"] .modal-box select:focus {
  border-color: var(--teal) !important;
  outline: none;
}

/* ── owner-select option dropdown (圖1) ── */
[class*="theme-morand"] .owner-select option {
  background: var(--bg-sidebar) !important;
  color: var(--sidebar-text-active) !important;
}

/* ── AI chat panel (圖2) ── */
[class*="theme-morand"] .ai-chat-panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
[class*="theme-morand"] .ai-chat-header {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
[class*="theme-morand"] .ai-chat-header-title {
  color: var(--text-primary);
}
[class*="theme-morand"] .ai-chat-header-title span {
  background: var(--teal-light);
  color: var(--teal-dark);
}
[class*="theme-morand"] .ai-chat-close { color: var(--gray-500); }

/* ── badge 買入/賣出 (圖4/5/7) ── */
[class*="theme-morand"] .badge.teal {
  background: var(--teal-light);
  color: var(--teal-dark);
}
[class*="theme-morand"] .badge.gray {
  background: var(--gray-100);
  color: var(--gray-700);
}

/* ── filter-box / filter-modal ── */
[class*="theme-morand"] .filter-box,
[class*="theme-morand"] .dropdown {
  background: var(--white);
  border: 1px solid var(--gray-200);
}

/* ── page-header-pill 背景（白色太突兀時）── */
[class*="theme-morand"] .page-header-pill {
  background: var(--white);
  border-color: var(--gray-100);
}

/* ── 莫蘭迪主題精緻化元件配色 ── */

/* 1. 彈跳視窗底色與邊框修正 */
[class*="theme-morand"] .modal-box {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12) !important;
}

[class*="theme-morand"] .modal-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--gray-100) !important;
  color: var(--text-primary) !important;
}

[class*="theme-morand"] .modal-footer {
  background: var(--gray-50) !important;
  border-top: 1px solid var(--gray-100) !important;
}

/* 2. AI 助手視窗配色修正 */
[class*="theme-morand"] .ai-chat-panel {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
}

[class*="theme-morand"] .ai-chat-header {
  background: var(--gray-50) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

[class*="theme-morand"] .ai-chat-input-bar {
  background: var(--gray-50) !important;
  border-top: 1px solid var(--gray-200) !important;
}

[class*="theme-morand"] .ai-chat-input {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  color: var(--text-primary) !important;
}

[class*="theme-morand"] .ai-chat-input:focus {
  border-color: var(--teal) !important;
  background: var(--white) !important;
}

[class*="theme-morand"] .ai-chat-send {
  background: var(--teal) !important;
  color: var(--white) !important;
}

[class*="theme-morand"] .ai-chat-send:disabled {
  background: var(--gray-200) !important;
  color: var(--gray-400) !important;
  opacity: 0.6;
}

[class*="theme-morand"] .ai-msg.user {
  background: var(--teal-light) !important;
  color: var(--teal-dark) !important;
}

[class*="theme-morand"] .ai-msg.ai {
  background: var(--gray-50) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--gray-100) !important;
}

/* 3. TWD / USD 切換按鈕與通用小圖示按鈕色調 */
[class*="theme-morand"] .btn-action-icon {
  border: 1px solid var(--gray-200) !important;
  background: var(--gray-50) !important;
  color: var(--gray-700) !important;
}

[class*="theme-morand"] .btn-action-icon:hover {
  background: var(--gray-100) !important;
  border-color: var(--gray-300) !important;
  color: var(--gray-800) !important;
}

/* 4. 表格標頭（Table Headers）色調優雅化 */
[class*="theme-morand"] .tx-table thead th,
[class*="theme-morand"] .yearly-table thead th,
[class*="theme-morand"] .inv-main-table thead th,
[class*="theme-morand"] .nw-table thead th,
[class*="theme-morand"] .ticker-detail-table thead th,
[class*="theme-morand"] .inv-th {
  background: var(--gray-100) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

/* 5. 全域捲軸 (Global Scrollbar) 色調融入 */
[class*="theme-morand"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02) !important;
}

[class*="theme-morand"] ::-webkit-scrollbar-thumb {
  background: var(--gray-200) !important;
  border: 2.5px solid var(--white) !important;
}

[class*="theme-morand"] ::-webkit-scrollbar-thumb:hover {
  background: var(--gray-300) !important;
}

[class*="theme-morand"] {
  scrollbar-color: var(--gray-200) rgba(0, 0, 0, 0.02) !important;
}

/* ── 莫蘭迪主題摺疊選擇器樣式 ── */
.morand-selector-wrap {
  border: 1px solid var(--gray-200) !important;
  border-radius: 12px !important;
  background: var(--white) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.morand-selector-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  background: var(--gray-50) !important;
  transition: background 0.2s !important;
}

.morand-selector-header:hover {
  background: var(--gray-100) !important;
}

.morand-selector-content {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 16px !important;
}

.morand-selector-wrap.open .morand-selector-content {
  max-height: 500px !important; /* 大於九宮格高度即可 */
  padding: 16px !important;
  border-top: 1px solid var(--gray-200) !important;
}

.morand-selector-arrow {
  transition: transform 0.25s ease !important;
  color: var(--gray-400) !important;
}

.morand-selector-wrap.open .morand-selector-arrow {
  transform: rotate(180deg) !important;
}

/* ═══════════════════════════════════════════════════════════════
   莫蘭迪主題視覺細節調整與金融配色優化 (2026-05-24)
   ═══════════════════════════════════════════════════════════════ */

/* 1. 手風琴前 Icon 統一改為主題同色調 */
[class*="theme-morand"] .bs-outer-header .icon-box.sm {
  background: var(--teal-light) !important;
  color: var(--teal-dark) !important;
}

/* 2. 交易歷史記錄金融專用配色 (不受莫蘭迪主題覆蓋影響) */
.badge-financial.teal {
  background-color: #dcfce7 !important;
  color: #166534 !important;
}
.badge-financial.red {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}
.badge-financial.blue {
  background-color: #dbeafe !important;
  color: #1e40af !important;
}
.badge-financial.indigo {
  background-color: #e0e7ff !important;
  color: #3730a3 !important;
}
.badge-financial.purple {
  background-color: #f3e8ff !important;
  color: #6b21a8 !important;
}
.badge-financial.gray {
  background-color: #f3f4f6 !important;
  color: #4b5563 !important;
}

/* 3. 卡片切換按鈕 (預算帳戶 / 當月進出) 主題化樣式 */
.budget-tab-btn {
  flex: 1;
  padding: 5px 0;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s;
  background: transparent;
  color: var(--text-gray);
  outline: 1px solid var(--sep);
}
[class*="theme-morand"] .budget-tab-btn {
  outline: 1px solid var(--gray-200) !important;
  color: var(--gray-600) !important;
}
.budget-tab-btn.active {
  background: var(--teal) !important;
  color: var(--white) !important;
  box-shadow: 0 2px 8px var(--teal-shadow, rgba(20, 184, 166, 0.35)) !important;
  outline: none !important;
}

/* 4. 記帳模式切換按鈕 (提撥到預算 / 從預算支出) 主題化樣式 */
.budget-mode-btn {
  flex: 1;
  padding: 7px 0;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  background: var(--bg);
  color: var(--text-secondary);
  transition: all 0.2s;
}
.budget-mode-btn.active {
  background: var(--teal-light) !important;
  color: var(--teal-dark) !important;
  font-weight: 600 !important;
}
[class*="theme-morand"] .budget-mode-btn.active {
  background: var(--teal-light) !important;
  color: var(--teal-dark) !important;
  font-weight: 600 !important;
}
[class*="theme-morand"] .budget-mode-btn:not(.active) {
  background: var(--white) !important;
  color: var(--gray-600) !important;
}

/* ═══════════════════════════════════════════════════════════════
   手繪風主題 (Hand-drawn Style) - 鉛筆與蠟筆雙風格樣式
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. 彩色鉛筆手繪風格 (.theme-handdrawn-pencil) ── */

body.theme-handdrawn-pencil,
body.theme-handdrawn-pencil input,
body.theme-handdrawn-pencil select,
body.theme-handdrawn-pencil textarea,
body.theme-handdrawn-pencil button {
  font-family: 'Zen Kurenaido', 'Architects Daughter', cursive, sans-serif !important;
}

body.theme-handdrawn-pencil h1,
body.theme-handdrawn-pencil h2,
body.theme-handdrawn-pencil h3,
body.theme-handdrawn-pencil h4,
body.theme-handdrawn-pencil strong,
body.theme-handdrawn-pencil .logo-text,
body.theme-handdrawn-pencil .big-num {
  font-family: 'Cabin Sketch', 'Zen Kurenaido', cursive, sans-serif !important;
  letter-spacing: 0.5px !important;
}

/* 再生格線紙張底質 */
body.theme-handdrawn-pencil {
  background-color: #FAF9F5 !important;
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  color: #2d3748 !important;
}

body.theme-handdrawn-pencil .topbar,
body.theme-handdrawn-pencil .sidebar {
  background: var(--layer-3, #FAF9F5) !important; /* NOTE: 側邊欄與頂部欄為 Layer 3 */
  border-color: #2d3748 !important;
}

body.theme-handdrawn-pencil .sidebar {
  border: 2px solid #2d3748 !important;
  border-radius: 15px 255px 15px 225px / 255px 15px 225px 15px !important;
  box-shadow: 3px 4px 0px #2d3748 !important;
}

/* NOTE: 將內卡片與浮動面板分離，對齊 Layer 3 與 Layer 4，避免寫死 #ffffff */
body.theme-handdrawn-pencil .card {
  border: 2px solid #2d3748 !important;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow: 4px 4px 0px #2d3748 !important;
  background: var(--layer-3, #ffffff) !important; /* NOTE: 中間主要大卡片為 Layer 3 */
}
body.theme-handdrawn-pencil .modal-box,
body.theme-handdrawn-pencil .ai-chat-panel,
body.theme-handdrawn-pencil .filter-box,
body.theme-handdrawn-pencil .dropdown-menu,
body.theme-handdrawn-pencil .owner-select {
  border: 2px solid #2d3748 !important;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow: 4px 4px 0px #2d3748 !important;
  background: var(--layer-3, #ffffff) !important;
}

/* 鉛筆風按鈕 */
body.theme-handdrawn-pencil button,
body.theme-handdrawn-pencil .btn,
body.theme-handdrawn-pencil .btn-primary,
body.theme-handdrawn-pencil .btn-action-icon,
body.theme-handdrawn-pencil .btn-icon,
body.theme-handdrawn-pencil .budget-tab-btn,
body.theme-handdrawn-pencil .budget-mode-btn {
  border: 2px solid #2d3748 !important;
  border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px !important;
  box-shadow: 2px 3px 0px #2d3748 !important;
  background: #ffffff !important;
  color: #2d3748 !important;
  font-weight: 700 !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
}

body.theme-handdrawn-pencil button:hover,
body.theme-handdrawn-pencil .btn:hover {
  background: #f7fafc !important;
}

body.theme-handdrawn-pencil button:active,
body.theme-handdrawn-pencil button.active,
body.theme-handdrawn-pencil .btn:active,
body.theme-handdrawn-pencil .btn.active,
body.theme-handdrawn-pencil .budget-tab-btn.active,
body.theme-handdrawn-pencil .budget-mode-btn.active {
  transform: translate(1px, 2px) !important;
  box-shadow: 0px 1px 0px #2d3748 !important;
  background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.06) 5px, rgba(0,0,0,0.06) 7px) !important;
  color: #000000 !important;
}

/* 鉛筆排線 Hatch 表格表頭 */
body.theme-handdrawn-pencil table th,
body.theme-handdrawn-pencil .inv-th {
  background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.05) 5px, rgba(0,0,0,0.05) 7px) !important;
  color: #2d3748 !important;
  border-bottom: 2.5px solid #2d3748 !important;
  border-top: 1px solid #2d3748 !important;
}

/* 針對明細表標題欄不透明優化 */
body.theme-handdrawn-pencil .tx-table thead th,
body.theme-handdrawn-pencil .yearly-table thead th,
body.theme-handdrawn-pencil .nw-table thead th,
body.theme-handdrawn-pencil .inv-main-table thead th,
body.theme-handdrawn-pencil .inv-th {
  background-color: #FAF9F5 !important;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.05) 5px, rgba(0,0,0,0.05) 7px) !important;
}

body.theme-handdrawn-pencil table td {
  border-bottom: 1.5px dashed #cbd5e1 !important;
  background: transparent !important;
}

/* 鉛筆手繪側邊欄 Active 效果 */
body.theme-handdrawn-pencil .sidebar-nav .nav-item {
  color: #2d3748 !important;
  margin: 6px 0 !important;
}
body.theme-handdrawn-pencil .sidebar-nav .nav-item.active {
  background: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(0,0,0,0.06) 4px, rgba(0,0,0,0.06) 6px) !important;
  border: 2px solid #2d3748 !important;
  box-shadow: 2px 3px 0px #2d3748 !important;
  color: #000000 !important;
}

/* 家徽素描線圖化 (適用頂部與側邊欄) */
body.theme-handdrawn-pencil .inline-logo img,
body.theme-handdrawn-pencil .logo-img-real {
  filter: brightness(0) opacity(0.82) !important;
}

/* 手繪鉛筆滾動條 */
body.theme-handdrawn-pencil ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02) !important;
}
body.theme-handdrawn-pencil ::-webkit-scrollbar-thumb {
  background: #2d3748 !important;
  border: 3px solid #FAF9F5 !important;
  border-radius: 20px !important;
}

/* 手風琴 Icon 鉛筆線裝飾 */
body.theme-handdrawn-pencil .bs-outer-header .icon-box.sm {
  background: transparent !important;
  border: 1.5px solid #2d3748 !important;
  color: #2d3748 !important;
}

/* ───────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   ██████╗ ██████╗  █████╗ ██╗   ██╗ ██████╗ ███╗   ██╗
   ██╔══██╗██╔══██╗██╔══██╗╚██╗ ██╔╝██╔═══██╗████╗  ██║
   ██████╔╝██████╔╝███████║ ╚████╔╝ ██║   ██║██╔██╗ ██║
   ██╔══██╗██╔══██╗██╔══██║  ╚██╔╝  ██║   ██║██║╚██╗██║
   ██║  ██║██║  ██║██║  ██║   ██║   ╚██████╔╝██║ ╚████║
   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝  ╚═══╝
   新粗獷主義蠟筆風 (Neo-Brutalism + Offset Doodle)
   ── 完整升級版：硬陰影 / 錯位色塊 / 飽和純色 / 無純白 ──
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 0. CSS 品牌變數（所有風格通用 Layer 體系） ──────────────────────── */
:root {
  --layer-1: #BEC3C6;  /* Layer 1 預設大背景 (Morandi/Stone 藍灰) */
  --layer-2: #CBD0D3;  /* Layer 2 預設大卡片背景 */
  --layer-3: #DCE0E2;  /* Layer 3 預設控制條背景 */
  --layer-4: #FFFDF6;  /* Layer 4 預設內卡片白底 */
}

body.theme-handdrawn-crayon {
  --cb-ink:        #1A1A1A;  /* 極深黑 — 主框線 */
  --cb-ink-soft:   #4A4A4A;  /* 次級文字 */
  --cb-blue:       #5B9BD5;  /* 飽和藍 */
  --cb-green:      #10B981;  /* 飽和綠 */
  --cb-amber:      #F59E0B;  /* 飽和橘黃 */
  --cb-red:        #EF4444;  /* 飽和紅 */
  --cb-purple:     #8B5CF6;  /* 飽和紫 */
  --cb-cyan:       #06B6D4;  /* 飽和青 */
  
  /* 對齊自訂 4 層 Layer 體系 */
  --cb-paper:      var(--layer-1, #BEC3C6);  
  --cb-card:       var(--layer-2, #CBD0D3);  
  --cb-float:      var(--layer-3, #DCE0E2);  
}

/* NOTE: 藍灰暖石色調改為引用 var(--layer-x)，以利自訂 Layer 色彩生效 */
body.theme-handdrawn-crayon.crayon-tone-bluegray {
  --cb-paper:      var(--layer-1, #BEC3C6);  
  --cb-card:       var(--layer-2, #CBD0D3);  
  --cb-float:      var(--layer-3, #DCE0E2);  
}

/* 暖沙大地色調 (如果未使用 JS 覆蓋時的預設回退) */
body.theme-handdrawn-crayon.crayon-tone-warmbed {
  --cb-paper:      var(--layer-1, #D7C4A9);  
  --cb-card:       var(--layer-2, #E3D6C3);  
  --cb-float:      var(--layer-3, #ECE2D5);  
}

/* ── 1. 全域字型與文字色 ─────────────────────────────────────────────── */
body.theme-handdrawn-crayon,
body.theme-handdrawn-crayon input,
body.theme-handdrawn-crayon select,
body.theme-handdrawn-crayon textarea,
body.theme-handdrawn-crayon button {
  font-family: 'Yusei Magic', 'Noto Sans TC', cursive, sans-serif !important;
  color: var(--cb-ink-soft) !important;
}

body.theme-handdrawn-crayon h1,
body.theme-handdrawn-crayon h2,
body.theme-handdrawn-crayon h3,
body.theme-handdrawn-crayon h4,
body.theme-handdrawn-crayon strong,
body.theme-handdrawn-crayon .logo-text {
  font-family: 'Palette Mosaic', 'Yusei Magic', cursive !important;
  color: var(--cb-ink) !important;
}

/* 將所有數字部分改為 Gamja Flower 字體 */
body.theme-handdrawn-crayon .big-num,
body.theme-handdrawn-crayon .mono,
body.theme-handdrawn-crayon .val-main,
body.theme-handdrawn-crayon .val-sub,
body.theme-handdrawn-crayon .donut-label-lg,
body.theme-handdrawn-crayon td.text-right,
body.theme-handdrawn-crayon .amount,
body.theme-handdrawn-crayon input[type="number"],
body.theme-handdrawn-crayon .percent,
body.theme-handdrawn-crayon .bs-total,
body.theme-handdrawn-crayon #inv-return-cagr,
body.theme-handdrawn-crayon #nw-return-cagr,
body.theme-handdrawn-crayon .month-nav h2,
body.theme-handdrawn-crayon .year-nav-label,
body.theme-handdrawn-crayon .year-networth-value,
body.theme-handdrawn-crayon .header-flat-stats .val,
body.theme-handdrawn-crayon .yearly-table td {
  font-family: 'Gamja Flower', 'Yusei Magic', cursive !important;
}

/* ── 2. 全域背景：米紙色，拒絕純白 ─────────────────────────────────── */
body.theme-handdrawn-crayon {
  background-color: var(--cb-paper) !important;
}

/* ── 3. 頂部欄 / Sidebar：凍結 + 粗黑截斷線 ──────────────────────────── */
body.theme-handdrawn-crayon .topbar {
  background: var(--cb-float) !important; /* NOTE: 頂部欄為 Layer 3 */
  border-bottom: 4px solid var(--cb-ink) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

body.theme-handdrawn-crayon .sidebar {
  background: var(--cb-float) !important; /* NOTE: 側邊欄為 Layer 3 */
  border-right: 4px solid var(--cb-ink) !important;
  border-radius: 0 !important;
  box-shadow: 4px 0px 0px 0px var(--cb-ink) !important;
}

/* ── 4. 卡片與一般容器：雙層不對稱著色錯位 ─────────────────────────── */
body.theme-handdrawn-crayon .card,
body.theme-handdrawn-crayon .dropdown-menu {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
/* NOTE: 將內卡片與下拉選單分離，內卡片使用 Layer 4，下拉選單使用 Layer 3 (float) */
body.theme-handdrawn-crayon .card::before {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  left: 6px !important;
  right: 2px !important;
  bottom: 8px !important;
  background: var(--cb-float, #FFFDF6) !important; /* NOTE: 中間主要大卡片為 Layer 3 */
  transform: rotate(-0.5deg) scale(0.99) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .dropdown-menu::before {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  left: 6px !important;
  right: 2px !important;
  bottom: 8px !important;
  background: var(--cb-float, #FFF9E6) !important;
  transform: rotate(-0.5deg) scale(0.99) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .card::after,
body.theme-handdrawn-crayon .dropdown-menu::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 8px 12px / 10px 8px 12px 6px !important;
  box-shadow: 6px 6px 0px 0px var(--cb-ink, #1A1A1A) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* ── 5. 彈跳視窗 / AI助手 / 篩選器：雙層不對稱著色錯位（柔黃+彩色貼紙硬陰影）────── */
body.theme-handdrawn-crayon .modal-box,
body.theme-handdrawn-crayon .ai-chat-panel,
body.theme-handdrawn-crayon .filter-box {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
body.theme-handdrawn-crayon .modal-box::before,
body.theme-handdrawn-crayon .ai-chat-panel::before,
body.theme-handdrawn-crayon .filter-box::before {
  content: "" !important;
  position: absolute !important;
  /* 著色偏斜/沒塗滿 */
  top: 5px !important;
  left: 8px !important;
  right: 3px !important;
  bottom: 8px !important;
  background: var(--cb-float, #FFF9E6) !important;
  transform: rotate(0.4deg) scale(0.99) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .modal-box::after,
body.theme-handdrawn-crayon .ai-chat-panel::after,
body.theme-handdrawn-crayon .filter-box::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 8px 12px / 10px 8px 12px 6px !important;
  box-shadow: 8px 8px 0px 0px var(--cb-blue, #3B82F6) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* ── 6. 雙層按鈕著色錯位與 hover 蠟筆變色 ─────────── */
body.theme-handdrawn-crayon button,
body.theme-handdrawn-crayon .btn,
body.theme-handdrawn-crayon .btn-primary,
body.theme-handdrawn-crayon .btn-action-icon,
body.theme-handdrawn-crayon .btn-icon,
body.theme-handdrawn-crayon .budget-tab-btn,
body.theme-handdrawn-crayon .budget-mode-btn,
body.theme-handdrawn-crayon .inv-range-btn {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--cb-ink, #1A1A1A) !important;
  font-weight: 700 !important;
  transition: transform 0.08s ease !important;
  isolation: isolate !important;
}

/* NOTE: 讓彩色蠟筆風格下的折線圖區間按鈕在未選中時使用次級墨色，選中與 hover 時使用主墨色 */
body.theme-handdrawn-crayon .inv-range-btn {
  color: var(--cb-ink-soft, #4A4A4A) !important;
}
body.theme-handdrawn-crayon .inv-range-btn:hover {
  color: var(--cb-ink, #1A1A1A) !important;
}

body.theme-handdrawn-crayon button::before,
body.theme-handdrawn-crayon .btn::before,
body.theme-handdrawn-crayon .budget-tab-btn::before,
body.theme-handdrawn-crayon .budget-mode-btn::before,
body.theme-handdrawn-crayon .inv-range-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 4px !important;
  right: 1px !important;
  bottom: 5px !important;
  background: var(--cb-card, #FFFDF6) !important;
  transform: rotate(-1deg) scale(0.98) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
  transition: background 0.1s ease !important;
}
body.theme-handdrawn-crayon button::after,
body.theme-handdrawn-crayon .btn::after,
body.theme-handdrawn-crayon .budget-tab-btn::after,
body.theme-handdrawn-crayon .budget-mode-btn::after,
body.theme-handdrawn-crayon .inv-range-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  box-shadow: 5px 5px 0px 0px var(--cb-blue) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transition: box-shadow 0.08s ease !important;
}

/* ── 4a. 執行型按鈕色彩系統 (Crayon Clickable Buttons) ────────────────── */

/* A. 收入/確認 / 一般主要按鈕 / 新增按鈕 (薄荷綠 #3DB890) */
body.theme-handdrawn-crayon .btn-primary::before,
body.theme-handdrawn-crayon .btn-add::before,
body.theme-handdrawn-crayon .btn-success::before {
  background: #3DB890 !important;
}
body.theme-handdrawn-crayon .btn-primary::after,
body.theme-handdrawn-crayon .btn-add::after,
body.theme-handdrawn-crayon .btn-success::after {
  box-shadow: 4px 4px 0 0 #1A5C48 !important;
}
body.theme-handdrawn-crayon .btn-primary:hover::before,
body.theme-handdrawn-crayon .btn-add:hover::before,
body.theme-handdrawn-crayon .btn-success:hover::before {
  background: #3DB890 !important;
}
body.theme-handdrawn-crayon .btn-primary:hover::after,
body.theme-handdrawn-crayon .btn-add:hover::after,
body.theme-handdrawn-crayon .btn-success:hover::after {
  box-shadow: 6px 6px 0 0 #1A5C48 !important;
}

/* B. 主要動作 / 提交 / 儲存按鈕 (深茶墨 #2d2000) */
body.theme-handdrawn-crayon .btn-primary[type="submit"]::before,
body.theme-handdrawn-crayon #btn-save-ai-key::before,
body.theme-handdrawn-crayon #btn-import-confirm::before,
body.theme-handdrawn-crayon button[data-save-group-balances]::before {
  background: #2d2000 !important;
}
body.theme-handdrawn-crayon .btn-primary[type="submit"]::after,
body.theme-handdrawn-crayon #btn-save-ai-key::after,
body.theme-handdrawn-crayon #btn-import-confirm::after,
body.theme-handdrawn-crayon button[data-save-group-balances]::after {
  box-shadow: 4px 4px 0 0 #5a3e00 !important;
}
body.theme-handdrawn-crayon .btn-primary[type="submit"],
body.theme-handdrawn-crayon #btn-save-ai-key,
body.theme-handdrawn-crayon #btn-import-confirm,
body.theme-handdrawn-crayon button[data-save-group-balances] {
  color: #FBF2D0 !important;
}
body.theme-handdrawn-crayon .btn-primary[type="submit"]:hover::before,
body.theme-handdrawn-crayon #btn-save-ai-key:hover::before,
body.theme-handdrawn-crayon #btn-import-confirm:hover::before,
body.theme-handdrawn-crayon button[data-save-group-balances]:hover::before {
  background: #2d2000 !important;
}
body.theme-handdrawn-crayon .btn-primary[type="submit"]:hover::after,
body.theme-handdrawn-crayon #btn-save-ai-key:hover::after,
body.theme-handdrawn-crayon #btn-import-confirm:hover::after,
body.theme-handdrawn-crayon button[data-save-group-balances]:hover::after {
  box-shadow: 6px 6px 0 0 #5a3e00 !important;
}

/* NOTE: 確認生成（#btn-batch-tx-submit）回退至蠟筆預設按鈕配色，與「取消」按鈕一致。
   根本原因：該按鈕同時具有 class="btn-primary" + type="submit"，
   導致上方 Section B 的 .btn-primary[type="submit"] 會命中它。
   此處以 ID 選擇器（特異度=100）覆蓋 class+attribute 選擇器（特異度=020）。 */
body.theme-handdrawn-crayon #btn-batch-tx-submit::before {
  background: var(--cb-card, #FFFDF6) !important;
}
body.theme-handdrawn-crayon #btn-batch-tx-submit::after {
  box-shadow: 5px 5px 0px 0px var(--cb-blue, #5B9BD5) !important;
}
body.theme-handdrawn-crayon #btn-batch-tx-submit {
  color: var(--cb-ink, #1A1A1A) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
}
body.theme-handdrawn-crayon #btn-batch-tx-submit:hover::before {
  background: #3DB890 !important;
}
body.theme-handdrawn-crayon #btn-batch-tx-submit:hover::after {
  box-shadow: 7px 7px 0px 0px var(--cb-blue, #5B9BD5) !important;
}

/* 鉛筆風的確認生成按鈕對齊優化 */
body.theme-handdrawn-pencil #btn-batch-tx-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
}

/* ── 「清除篩選條件」按鈕 (#btn-clear-filter) 特化為動態蠟筆/鉛筆風雙層按鈕 ── */
body.theme-handdrawn-crayon #btn-clear-filter {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--cb-ink, #1A1A1A) !important;
  font-weight: 700 !important;
  transition: transform 0.08s ease !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  padding: 6px 14px !important;
  transform: none !important;
  height: auto !important;
  border-radius: 0 !important;
}

body.theme-handdrawn-crayon #btn-clear-filter::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 4px !important;
  right: 1px !important;
  bottom: 5px !important;
  background: #FCDDD3 !important; /* 珊瑚紅微底色 */
  transform: rotate(-1deg) scale(0.98) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
  transition: background 0.1s ease !important;
}

body.theme-handdrawn-crayon #btn-clear-filter::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  box-shadow: 4px 4px 0px 0px var(--cb-red, #EF4444) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transition: box-shadow 0.08s ease !important;
}

body.theme-handdrawn-crayon #btn-clear-filter:hover {
  transform: translate(-2px, -2px) !important;
}

body.theme-handdrawn-crayon #btn-clear-filter:hover::before {
  background: #EF4444 !important;
}

body.theme-handdrawn-crayon #btn-clear-filter:hover::after {
  box-shadow: 6px 6px 0px 0px var(--cb-red, #EF4444) !important;
}

body.theme-handdrawn-crayon #btn-clear-filter:active {
  transform: translate(4px, 4px) !important;
}

body.theme-handdrawn-crayon #btn-clear-filter:active::after {
  box-shadow: 0px 0px 0px 0px transparent !important;
}

/* 鉛筆風適配 */
body.theme-handdrawn-pencil #btn-clear-filter {
  position: relative !important;
  background: #FAF9F5 !important;
  border: 2px solid #2d3748 !important;
  border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px !important;
  box-shadow: 2px 3px 0px #2d3748 !important;
  color: #2d3748 !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 6px 14px !important;
  opacity: 1 !important;
  height: auto !important;
}

body.theme-handdrawn-pencil #btn-clear-filter::after {
  content: '' !important;
  position: absolute !important;
  top: 0px; left: 0px; right: -2px; bottom: -2px;
  border: 1px solid #2d3748 !important;
  border-radius: 15px 255px 15px 225px / 255px 15px 225px 15px !important;
  pointer-events: none !important;
}

body.theme-handdrawn-pencil #btn-clear-filter:hover {
  background: #FFF1F2 !important;
}

body.theme-handdrawn-pencil #btn-clear-filter:active {
  transform: translate(1px, 2px) !important;
  box-shadow: 0px 1px 0px #2d3748 !important;
}

/* C. 支出 / 刪除 / 警示按鈕 (珊瑚橘 #D85A30) */
body.theme-handdrawn-crayon .btn-danger::before {
  background: #D85A30 !important;
}
body.theme-handdrawn-crayon .btn-danger::after {
  box-shadow: 4px 4px 0 0 #7A2800 !important;
}
body.theme-handdrawn-crayon .btn-danger {
  color: #FBF2D0 !important;
}
body.theme-handdrawn-crayon .btn-danger:hover::before {
  background: #D85A30 !important;
}
body.theme-handdrawn-crayon .btn-danger:hover::after {
  box-shadow: 6px 6px 0 0 #7A2800 !important;
}

/* D. 次要 / 查看 / 邊框按鈕 (天空藍 #5B9BD5) */
body.theme-handdrawn-crayon .btn-outline::before,
body.theme-handdrawn-crayon .btn-icon::before,
body.theme-handdrawn-crayon .budget-tab-btn::before,
body.theme-handdrawn-crayon .budget-mode-btn::before,
body.theme-handdrawn-crayon .inv-range-btn::before {
  background: #5B9BD5 !important;
}
body.theme-handdrawn-crayon .btn-outline::after,
body.theme-handdrawn-crayon .btn-icon::after,
body.theme-handdrawn-crayon .budget-tab-btn::after,
body.theme-handdrawn-crayon .budget-mode-btn::after,
body.theme-handdrawn-crayon .inv-range-btn::after {
  box-shadow: 4px 4px 0 0 #1A3C6E !important;
}
body.theme-handdrawn-crayon .btn-outline,
body.theme-handdrawn-crayon .btn-icon,
body.theme-handdrawn-crayon .budget-tab-btn,
body.theme-handdrawn-crayon .budget-mode-btn,
body.theme-handdrawn-crayon .inv-range-btn {
  color: #FBF2D0 !important;
}
body.theme-handdrawn-crayon .btn-outline:hover::before,
body.theme-handdrawn-crayon .btn-icon:hover::before,
body.theme-handdrawn-crayon .budget-tab-btn:hover::before,
body.theme-handdrawn-crayon .budget-mode-btn:hover::before,
body.theme-handdrawn-crayon .inv-range-btn:hover::before {
  background: #5B9BD5 !important;
}
body.theme-handdrawn-crayon .btn-outline:hover::after,
body.theme-handdrawn-crayon .btn-icon:hover::after,
body.theme-handdrawn-crayon .budget-tab-btn:hover::after,
body.theme-handdrawn-crayon .budget-mode-btn:hover::after,
body.theme-handdrawn-crayon .inv-range-btn:hover::after {
  box-shadow: 6px 6px 0 0 #1A3C6E !important;
}

/* ── 4b. 標籤型不可按樣式 (Crayon Disabled Tags & Badges) ───────────── */
body.theme-handdrawn-crayon .badge,
body.theme-handdrawn-crayon .badge-pill,
body.theme-handdrawn-crayon .tag-disabled {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.9 !important;
  transition: none !important;
}

/* ★ 特化修正：清除篩選條件按鈕雖然有 .badge 類，但它必須可以點選 */
body.theme-handdrawn-crayon #btn-clear-filter {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 🌿 被動收入 / 確認類 / 綠色標籤 */
body.theme-handdrawn-crayon .badge.teal,
body.theme-handdrawn-crayon .badge-pill.stock,
body.theme-handdrawn-crayon .badge-financial.teal {
  background: #C5EDE3 !important;
  color: #1A5C48 !important;
  border: 2px dashed #3DB890 !important;
}

/* 🔴 固定支出 / 警示類 / 橘紅標籤 */
body.theme-handdrawn-crayon .badge.red,
body.theme-handdrawn-crayon .badge.orange,
body.theme-handdrawn-crayon .badge.rose,
body.theme-handdrawn-crayon .badge-pill.bond,
body.theme-handdrawn-crayon .badge-financial.red {
  background: #FCDDD3 !important;
  color: #7A2800 !important;
  border: 2px dashed #D85A30 !important;
}

/* 🔵 轉帳 / 中性類 / 藍色標籤 */
body.theme-handdrawn-crayon .badge.indigo,
body.theme-handdrawn-crayon .badge.blue,
body.theme-handdrawn-crayon .badge-financial.blue,
body.theme-handdrawn-crayon .badge-financial.indigo {
  background: #D5E9F8 !important;
  color: #1A3C6E !important;
  border: 2px dashed #5B9BD5 !important;
}

/* 💜 浮動支出 / 分類類 / 紫色標籤 */
body.theme-handdrawn-crayon .badge.purple,
body.theme-handdrawn-crayon .badge-financial.purple {
  background: #E5E0F8 !important;
  color: #3C2880 !important;
  border: 2px dashed #8B78E0 !important;
}

/* 📋 預算 / 中性米白 / 灰色與暗色標籤 */
body.theme-handdrawn-crayon .badge.gray,
body.theme-handdrawn-crayon .badge.dark,
body.theme-handdrawn-crayon .badge.amber {
  background: #F8F2DC !important;
  color: #5a3e00 !important;
  border: 2px dashed #B8960A !important;
}


body.theme-handdrawn-crayon button:hover,
body.theme-handdrawn-crayon .btn:hover,
body.theme-handdrawn-crayon .inv-range-btn:hover {
  transform: translate(-2px, -2px) !important;
}
body.theme-handdrawn-crayon button:hover::before,
body.theme-handdrawn-crayon .btn:hover::before,
body.theme-handdrawn-crayon .inv-range-btn:hover::before {
  background: #3DB890 !important;
}
body.theme-handdrawn-crayon button:hover::after,
body.theme-handdrawn-crayon .btn:hover::after,
body.theme-handdrawn-crayon .inv-range-btn:hover::after {
  box-shadow: 7px 7px 0px 0px var(--cb-blue) !important;
}
/* 修正手繪風下設定大列表容器 (.sa-group) 因同時有 .card 與 overflow 滾動，導致其偽元素隨內容滾動而飄移（容器陷阱） */
body.theme-handdrawn-pencil .sa-group::before,
body.theme-handdrawn-pencil .sa-group::after,
body.theme-handdrawn-crayon .sa-group::before,
body.theme-handdrawn-crayon .sa-group::after {
  content: none !important;
  display: none !important;
}

/* 修正手繪風下主題選項 (.theme-option) 多出一層框線 */
body.theme-handdrawn-pencil .theme-option {
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.theme-handdrawn-pencil .theme-option.active {
  border: 2px solid #2d3748 !important;
  background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.04) 5px, rgba(0,0,0,0.04) 7px) !important;
  box-shadow: 2px 3px 0px #2d3748 !important;
}
body.theme-handdrawn-pencil .theme-option:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: #2d3748 !important;
}

body.theme-handdrawn-crayon .theme-option {
  border: 2px dashed rgba(26, 26, 26, 0.2) !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.theme-handdrawn-crayon .theme-option.active {
  border: 3px solid var(--cb-ink) !important;
  background: rgba(253, 224, 71, 0.15) !important;
  box-shadow: 3px 3px 0px 0px var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .theme-option:hover {
  background: rgba(253, 224, 71, 0.1) !important;
  border-color: var(--cb-ink) !important;
}

/* 舊 btn-primary hover 樣式已廢棄，由 4a 執行型系統取代 */

body.theme-handdrawn-crayon button:active,
body.theme-handdrawn-crayon .btn:active,
body.theme-handdrawn-crayon .inv-range-btn:active,
body.theme-handdrawn-crayon .btn-action-icon:active,
body.theme-handdrawn-crayon .btn-icon-transparent:active {
  transform: translate(5px, 5px) !important;
}
body.theme-handdrawn-crayon button:active::after,
body.theme-handdrawn-crayon .btn:active::after,
body.theme-handdrawn-crayon .budget-tab-btn:active::after,
body.theme-handdrawn-crayon .budget-mode-btn:active::after,
body.theme-handdrawn-crayon .inv-range-btn:active::after,
body.theme-handdrawn-crayon .btn-action-icon:active::after,
body.theme-handdrawn-crayon .btn-icon-transparent:active::after {
  box-shadow: 0px 0px 0px 0px transparent !important;
}

/* ── 7. 已選中 / Active 狀態：螢光黃蠟筆高亮 ───────────────────────── */
body.theme-handdrawn-crayon button.active,
body.theme-handdrawn-crayon .btn.active,
body.theme-handdrawn-crayon .budget-tab-btn.active,
body.theme-handdrawn-crayon .budget-mode-btn.active,
body.theme-handdrawn-crayon .inv-range-btn.active,
body.theme-handdrawn-crayon .sidebar-nav .nav-item.active {
  background: #3DB890 !important;
  color: #FBF2D0 !important;
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0px 0px var(--cb-ink) !important;
  outline: none !important;
}

body.theme-handdrawn-crayon button.active::before,
body.theme-handdrawn-crayon .btn.active::before,
body.theme-handdrawn-crayon .budget-tab-btn.active::before,
body.theme-handdrawn-crayon .budget-mode-btn.active::before,
body.theme-handdrawn-crayon .inv-range-btn.active::before {
  background: #3DB890 !important;
}

/* ── 7b. Sidebar .nav-btn 蠟筆錯位雙層樣式 ─────────────────────────── */
body.theme-handdrawn-crayon .sidebar-nav .nav-btn {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--cb-ink-soft, rgba(26,26,26,0.55)) !important;
  isolation: isolate !important;
  transition: transform 0.08s ease !important;
}
body.theme-handdrawn-crayon .sidebar-nav .nav-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important; left: 4px !important; right: 1px !important; bottom: 5px !important;
  background: var(--cb-card, #FFFDF6) !important;
  transform: rotate(-1deg) scale(0.96) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
  transition: background 0.1s ease !important;
  opacity: 0 !important;
}
body.theme-handdrawn-crayon .sidebar-nav .nav-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  border: 0px solid var(--cb-ink) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  box-shadow: 0px 0px 0px 0px var(--cb-blue) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transition: box-shadow 0.08s ease, border-width 0.08s ease !important;
}
body.theme-handdrawn-crayon .sidebar-nav .nav-btn:hover {
  background: transparent !important;
  transform: translate(-1px, -1px) !important;
  color: var(--cb-ink, #1A1A1A) !important;
  border-left: none !important;
}
body.theme-handdrawn-crayon .sidebar-nav .nav-btn:hover::before {
  background: #3DB890 !important;
  opacity: 1 !important;
}
body.theme-handdrawn-crayon .sidebar-nav .nav-btn:hover::after {
  border-width: 2px !important;
  box-shadow: 3px 3px 0px 0px var(--cb-blue) !important;
}
/* active / 已選中：黃色蠟筆填色，擠壓下沉動畫 */
body.theme-handdrawn-crayon .sidebar-nav .nav-btn.active {
  background: transparent !important;
  color: var(--cb-ink, #1A1A1A) !important;
  transform: translate(3px, 3px) !important;
  box-shadow: none !important;
}
body.theme-handdrawn-crayon .sidebar-nav .nav-btn.active::before {
  background: #3DB890 !important;
  opacity: 1 !important;
}
body.theme-handdrawn-crayon .sidebar-nav .nav-btn.active::after {
  border-width: 3px !important;
  box-shadow: 2px 2px 0px 0px var(--cb-ink) !important;
}
/* click press 動畫 */
body.theme-handdrawn-crayon .sidebar-nav .nav-btn:active {
  transform: translate(5px, 5px) !important;
}
body.theme-handdrawn-crayon .sidebar-nav .nav-btn:active::after {
  box-shadow: 0px 0px 0px 0px var(--cb-blue) !important;
}

/* ── 8. Sidebar Nav Hover (nav-item legacy) ─────────────────────────── */
body.theme-handdrawn-crayon .sidebar-nav .nav-item {
  color: var(--cb-ink-soft) !important;
  margin: 6px 0 !important;
}
body.theme-handdrawn-crayon .sidebar-nav .nav-item:hover {
  background: rgba(59, 130, 246, 0.18) !important;
  border-left: 3px solid var(--cb-blue) !important;
}

/* ── 9. 表格：粗黑表頭線 + 虛線行分隔 ──────────────────────────────── */
body.theme-handdrawn-crayon table th,
body.theme-handdrawn-crayon .inv-th {
  background: rgba(253, 224, 71, 0.2) !important;
  color: var(--cb-ink) !important;
  border-bottom: 3px solid var(--cb-ink) !important;
  font-weight: 700 !important;
}

/* 針對明細表標題欄不透明優化 */
body.theme-handdrawn-crayon .tx-table thead th,
body.theme-handdrawn-crayon .yearly-table thead th,
body.theme-handdrawn-crayon .nw-table thead th,
body.theme-handdrawn-crayon .inv-main-table thead th,
body.theme-handdrawn-crayon .inv-th {
  background-color: #FFFDF6 !important;
  background-image: linear-gradient(rgba(253, 224, 71, 0.4), rgba(253, 224, 71, 0.4)) !important;
}

body.theme-handdrawn-crayon table td {
  border-bottom: 2px dashed rgba(26, 26, 26, 0.15) !important;
  background: transparent !important;
}

/* ── 10. Logo 黑線化 ────────────────────────────────────────────────── */
body.theme-handdrawn-crayon .inline-logo img,
body.theme-handdrawn-crayon .logo-img-real {
  filter: brightness(0) opacity(0.85) !important;
}

/* ── 11. 滾動條 ─────────────────────────────────────────────────────── */
body.theme-handdrawn-crayon ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03) !important;
}
body.theme-handdrawn-crayon ::-webkit-scrollbar-thumb {
  background: var(--cb-blue) !important;
  border: 3px solid var(--cb-paper) !important;
  border-radius: 4px !important;
}

/* ── 12. Icon 盒（帳戶摘要）────────────────────────────────────────── */
body.theme-handdrawn-crayon .bs-outer-header .icon-box.sm {
  background: rgba(16, 185, 129, 0.25) !important;
  border: 2px solid var(--cb-ink) !important;
  color: #065F46 !important;
  box-shadow: 3px 3px 0px 0px var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .bs-outer-header strong {
  color: var(--cb-ink) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   手繪風視覺細節第二階段深度修正 (鉛筆風 / 蠟筆風)
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. 容器底色去白色化 */
body.theme-handdrawn-pencil .card,
body.theme-handdrawn-pencil .modal-box,
body.theme-handdrawn-pencil .ai-chat-panel,
body.theme-handdrawn-pencil .filter-box,
body.theme-handdrawn-pencil .dropdown-menu,
body.theme-handdrawn-pencil .owner-select {
  background: #FAF9F5 !important;
}

body.theme-handdrawn-crayon .owner-select {
  background: var(--cb-card, #FFFDF6) !important;
}

/* NOTE: 鉛筆風下按鈕必須加上 position: relative !important，以避免其 ::after 手繪邊框因缺少定位基準而向上拉伸至父容器 (如大 card 或 page-section) 產生多餘長線的 Bug */
body.theme-handdrawn-pencil button,
body.theme-handdrawn-pencil .btn,
body.theme-handdrawn-pencil .btn-primary,
body.theme-handdrawn-pencil .btn-action-icon,
body.theme-handdrawn-pencil .btn-icon,
body.theme-handdrawn-pencil .budget-tab-btn,
body.theme-handdrawn-pencil .budget-mode-btn,
body.theme-handdrawn-pencil .inv-range-btn {
  position: relative !important;
  background: #FAF9F5 !important;
}
body.theme-handdrawn-pencil button:hover,
body.theme-handdrawn-pencil .btn:hover,
body.theme-handdrawn-pencil .inv-range-btn:hover {
  background: #F4F2E9 !important;
}

/* 2. 修復與重做按鈕/彈窗中的 SVG 圖示 */
body.theme-handdrawn-pencil button svg,
body.theme-handdrawn-pencil .btn svg,
body.theme-handdrawn-pencil .btn-icon svg,
body.theme-handdrawn-pencil .btn-action-icon svg,
body.theme-handdrawn-pencil .nw-detail-btn svg,
body.theme-handdrawn-pencil .nw-recalc-btn svg,
body.theme-handdrawn-pencil .ticker-excel-btn svg,
body.theme-handdrawn-pencil #nw-export-excel svg,
body.theme-handdrawn-pencil #btn-filter-close svg,
body.theme-handdrawn-pencil .ai-chat-close svg,
body.theme-handdrawn-pencil .ai-chat-send svg {
  stroke: #2d3748 !important;
}

body.theme-handdrawn-crayon button svg,
body.theme-handdrawn-crayon .btn svg,
body.theme-handdrawn-crayon .btn-icon svg,
body.theme-handdrawn-crayon .btn-action-icon svg,
body.theme-handdrawn-crayon .nw-detail-btn svg,
body.theme-handdrawn-crayon .nw-recalc-btn svg,
body.theme-handdrawn-crayon .ticker-excel-btn svg,
body.theme-handdrawn-crayon #nw-export-excel svg,
body.theme-handdrawn-crayon #btn-filter-close svg,
body.theme-handdrawn-crayon .ai-chat-close svg,
body.theme-handdrawn-crayon .ai-chat-send svg {
  stroke: var(--cb-ink, #1A1A1A) !important;
}

body.theme-handdrawn-pencil .nw-detail-btn,
body.theme-handdrawn-pencil .ticker-excel-btn,
body.theme-handdrawn-pencil .nw-recalc-btn {
  background: #FAF9F5 !important;
  border: 2px solid #2d3748 !important;
  color: #2d3748 !important;
}

body.theme-handdrawn-crayon .nw-detail-btn,
body.theme-handdrawn-crayon .ticker-excel-btn,
body.theme-handdrawn-crayon .nw-recalc-btn {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--cb-ink, #1A1A1A) !important;
  isolation: isolate !important;
}
body.theme-handdrawn-crayon .nw-detail-btn::before,
body.theme-handdrawn-crayon .ticker-excel-btn::before,
body.theme-handdrawn-crayon .nw-recalc-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 4px !important;
  right: 1px !important;
  bottom: 5px !important;
  background: var(--cb-card, #FFFDF6) !important;
  transform: rotate(-0.5deg) scale(0.98) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .nw-detail-btn::after,
body.theme-handdrawn-crayon .ticker-excel-btn::after,
body.theme-handdrawn-crayon .nw-recalc-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  box-shadow: 4px 4px 0px 0px var(--cb-blue, #3B82F6) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .nw-detail-btn:hover::after,
body.theme-handdrawn-crayon .ticker-excel-btn:hover::after,
body.theme-handdrawn-crayon .nw-recalc-btn:hover::after {
  box-shadow: 6px 6px 0px 0px var(--cb-blue, #3B82F6) !important;
}
body.theme-handdrawn-crayon .nw-detail-btn:active::after,
body.theme-handdrawn-crayon .ticker-excel-btn:active::after,
body.theme-handdrawn-crayon .nw-recalc-btn:active::after {
  box-shadow: 0px 0px 0px 0px var(--cb-blue, #3B82F6) !important;
}
body.theme-handdrawn-crayon .nw-detail-btn:active::before,
body.theme-handdrawn-crayon .nw-recalc-btn:active::before,
body.theme-handdrawn-crayon .ticker-excel-btn:active::before {
  background: #FDE047 !important;
}

/* 3. 解決 AI 助手對話清晰度與代碼樣式 */
body.theme-handdrawn-pencil .ai-chat-messages {
  background: #FAF9F5 !important;
}
body.theme-handdrawn-pencil .ai-msg.user {
  background: #FAF9F5 !important;
  color: #2d3748 !important;
  border: 2px solid #2d3748 !important;
  border-radius: 12px 18px 4px 14px / 18px 4px 14px 12px !important;
  box-shadow: 2px 2px 0px #2d3748 !important;
}
body.theme-handdrawn-pencil .ai-msg.ai {
  background: #FAF9F5 !important;
  color: #2d3748 !important;
  border: 2px solid #2d3748 !important;
  border-radius: 18px 12px 14px 4px / 4px 18px 12px 14px !important;
  box-shadow: -2px 2px 0px #2d3748 !important;
}
body.theme-handdrawn-pencil .ai-msg.system {
  background: #FAF9F5 !important;
  color: #c2410c !important;
  border: 1.5px dashed #c2410c !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
body.theme-handdrawn-pencil .ai-msg code {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1a202c !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: inherit !important;
}
body.theme-handdrawn-pencil .ai-chat-input-bar {
  background: #FAF9F5 !important;
  border-top: 2px solid #2d3748 !important;
}
body.theme-handdrawn-pencil .ai-chat-input {
  background: #FAF9F5 !important;
  color: #2d3748 !important;
  border: 1.5px solid #2d3748 !important;
}

body.theme-handdrawn-crayon .ai-chat-messages {
  background: var(--cb-float, #FFF9E6) !important;
}
body.theme-handdrawn-crayon .ai-msg.user {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
body.theme-handdrawn-crayon .ai-msg.user::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 5px !important;
  right: 2px !important;
  bottom: 6px !important;
  background: var(--cb-card, #FFFDF6) !important;
  transform: rotate(-0.5deg) scale(0.99) !important;
  border-radius: 12px 18px 4px 14px / 18px 4px 14px 12px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .ai-msg.user::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 2.5px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 12px 18px 4px 14px / 18px 4px 14px 12px !important;
  box-shadow: 4px 4px 0px 0px var(--cb-blue, #3B82F6) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body.theme-handdrawn-crayon .ai-msg.ai {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
body.theme-handdrawn-crayon .ai-msg.ai::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 2px !important;
  right: 5px !important;
  bottom: 6px !important;
  background: var(--cb-float, #FFF9E6) !important;
  transform: rotate(0.5deg) scale(0.99) !important;
  border-radius: 18px 12px 14px 4px / 4px 18px 12px 14px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .ai-msg.ai::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 2.5px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 18px 12px 14px 4px / 4px 18px 12px 14px !important;
  box-shadow: -4px 4px 0px 0px var(--cb-green, #10B981) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body.theme-handdrawn-crayon .ai-msg.system {
  background: var(--cb-float, #FFF9E6) !important;
  color: #C2410C !important;
  border: 2px dashed #C2410C !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
body.theme-handdrawn-crayon .ai-msg code {
  background: rgba(0, 0, 0, 0.07) !important;
  color: var(--cb-ink, #1A1A1A) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: inherit !important;
}
body.theme-handdrawn-crayon .ai-chat-input-bar {
  background: var(--cb-float, #FFF9E6) !important;
  border-top: 3px solid var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon .ai-chat-input {
  background: var(--cb-card, #FFFDF6) !important;
  color: var(--cb-ink, #1A1A1A) !important;
  border: 2.5px solid var(--cb-ink, #1A1A1A) !important;
}

/* 4. 實現雙重手寫框與密集排線陰影 (Wired.js 風格) */
body.theme-handdrawn-pencil .card,
body.theme-handdrawn-pencil .modal-box,
body.theme-handdrawn-pencil .filter-box {
  position: relative;
  box-shadow: 1px 1px 0px #2d3748, 2px 2px 0px #2d3748, 3px 3px 0px #2d3748, 4px 4px 0px #2d3748, 5px 5px 0px #2d3748 !important;
}

body.theme-handdrawn-pencil .sidebar {
  box-shadow: 1px 1px 0px #2d3748, 2px 2px 0px #2d3748, 3px 3px 0px #2d3748, 4px 4px 0px #2d3748, 5px 5px 0px #2d3748 !important;
}

body.theme-handdrawn-pencil .ai-chat-panel,
body.theme-handdrawn-pencil .monthly-note-panel,
body.theme-handdrawn-pencil .ai-assistant-fab,
body.theme-handdrawn-pencil .monthly-note-fab,
body.theme-handdrawn-pencil .fab-add {
  position: fixed !important; /* 強制維持 fixed 定位，避開 relative 容器陷阱 */
  box-shadow: 1px 1px 0px #2d3748, 2px 2px 0px #2d3748, 3px 3px 0px #2d3748, 4px 4px 0px #2d3748, 5px 5px 0px #2d3748 !important;
}
/* AI 懸浮按鈕 active 按壓狀態適配 (鉛筆風) */
body.theme-handdrawn-pencil .ai-assistant-fab.active {
  transform: translate(1px, 2px) !important;
  box-shadow: 0px 1px 0px #2d3748 !important;
  background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.06) 5px, rgba(0,0,0,0.06) 7px) !important;
  color: #000000 !important;
}

body.theme-handdrawn-pencil .card::after,
body.theme-handdrawn-pencil .modal-box::after,
body.theme-handdrawn-pencil .ai-chat-panel::after,
body.theme-handdrawn-pencil .filter-box::after,
body.theme-handdrawn-pencil .sidebar::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px; right: -2.5px; bottom: -2.5px;
  border: 1.5px solid #2d3748;
  border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px;
  pointer-events: none;
  z-index: 10;
}

/* NOTE: 由於設定頁折疊大容器 (.sa-group) 在 HTML 中同時具有 .card class，為防被上方的 .card::after 覆蓋規則重新加上框線，此處必須放置在下方以更具體地清除手繪外框與密排線 */
body.theme-handdrawn-pencil .card.sa-group::after,
body.theme-handdrawn-crayon .card.sa-group::after,
body.theme-handdrawn-pencil .sa-group::after,
body.theme-handdrawn-crayon .sa-group::after,
body.theme-handdrawn-pencil .sa-group::before,
body.theme-handdrawn-crayon .sa-group::before {
  content: none !important;
  display: none !important;
}

body.theme-handdrawn-pencil button::after,
body.theme-handdrawn-pencil .btn::after,
body.theme-handdrawn-pencil .budget-tab-btn::after,
body.theme-handdrawn-pencil .budget-mode-btn::after,
body.theme-handdrawn-pencil .inv-range-btn::after {
  content: '';
  position: absolute;
  top: 0px; left: 0px; right: -2px; bottom: -2px;
  border: 1px solid #2d3748;
  border-radius: 15px 255px 15px 225px / 255px 15px 225px 15px;
  pointer-events: none;
}

/* 清除微型/小工具按鈕的雙層偽元素，防止黑色遮擋 (鉛筆風) */
body.theme-handdrawn-pencil .tools-pill-item::before,
body.theme-handdrawn-pencil .tools-pill-item::after,
body.theme-handdrawn-pencil .btn-icon-transparent::before,
body.theme-handdrawn-pencil .btn-icon-transparent::after,
body.theme-handdrawn-pencil .cat-remove::before,
body.theme-handdrawn-pencil .cat-remove::after,
body.theme-handdrawn-pencil .ai-chat-close::before,
body.theme-handdrawn-pencil .ai-chat-close::after,
body.theme-handdrawn-pencil .ai-chat-send::before,
body.theme-handdrawn-pencil .ai-chat-send::after,
body.theme-handdrawn-pencil #btn-filter-close::before,
body.theme-handdrawn-pencil #btn-filter-close::after {
  content: none !important;
}

body.theme-handdrawn-pencil .tools-pill-item,
body.theme-handdrawn-pencil .btn-icon-transparent,
body.theme-handdrawn-pencil .cat-remove,
body.theme-handdrawn-pencil .ai-chat-close,
body.theme-handdrawn-pencil .ai-chat-send,
body.theme-handdrawn-pencil #btn-filter-close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.theme-handdrawn-pencil .tools-pill-item:hover,
body.theme-handdrawn-pencil .btn-icon-transparent:hover,
body.theme-handdrawn-pencil .cat-remove:hover,
body.theme-handdrawn-pencil .ai-chat-close:hover,
body.theme-handdrawn-pencil .ai-chat-send:hover,
body.theme-handdrawn-pencil #btn-filter-close:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
}

/* 修正鉛筆風下新增按鈕的 tooltip 偽元素衝突，隱藏自訂 tooltip 以保留瀏覽器原生的「新增紀錄」提示 */
body.theme-handdrawn-pencil .fab-add::after {
  content: none !important;
  display: none !important;
}



body.theme-handdrawn-crayon .sidebar {
  /* sidebar 右側硬陰影 */
  box-shadow: 4px 0px 0px 0px var(--cb-ink, #1A1A1A) !important;
}

body.theme-handdrawn-crayon .ai-chat-panel,
body.theme-handdrawn-crayon .monthly-note-panel,
body.theme-handdrawn-crayon .ai-assistant-fab,
body.theme-handdrawn-crayon .monthly-note-fab,
body.theme-handdrawn-crayon .fab-add {
  position: fixed !important; /* 強制維持 fixed 定位，避開 relative 容器陷阱 */
}
/* 鎖定蠟筆風懸浮按鈕的 ::after 偽元素，防止其被通用 tooltip hover 樣式覆蓋產生黑色色塊 */
body.theme-handdrawn-crayon .fab-add::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  box-shadow: 5px 5px 0px 0px var(--cb-blue) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
body.theme-handdrawn-crayon .fab-add:hover::after {
  box-shadow: 7px 7px 0px 0px var(--cb-blue) !important;
  transform: none !important;
  opacity: 1 !important;
}
/* AI 懸浮按鈕 active 按壓狀態適配 (蠟筆風) */
body.theme-handdrawn-crayon .ai-assistant-fab.active {
  transform: translate(3px, 3px) !important;
}
body.theme-handdrawn-crayon .ai-assistant-fab.active::before {
  background: #FDE047 !important;
}
body.theme-handdrawn-crayon .ai-assistant-fab.active::after {
  box-shadow: 2px 2px 0px 0px var(--cb-ink, #1A1A1A) !important;
}

/* 5. 修復持有人切換選單字體與背景 */
body.theme-handdrawn-pencil .owner-select,
body.theme-handdrawn-pencil .owner-select option {
  background: #FAF9F5 !important;
  color: #2d3748 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-align-last: center !important;
}

body.theme-handdrawn-crayon .owner-select,
body.theme-handdrawn-crayon .owner-select option {
  background: var(--cb-card, #FFFDF6) !important;
  color: var(--cb-ink, #1A1A1A) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-align-last: center !important;
}

/* 6. 彈跳視窗頭尾底色與分割線優化 */
body.theme-handdrawn-pencil .modal-header {
  background: #FAF9F5 !important;
  border-bottom: 2px solid #2d3748 !important;
}
body.theme-handdrawn-pencil .modal-footer {
  background: #FAF9F5 !important;
  border-top: 2px solid #2d3748 !important;
}
body.theme-handdrawn-pencil .modal-body {
  background: #FAF9F5 !important;
}

body.theme-handdrawn-crayon .modal-header {
  background: var(--cb-float, #FFF9E6) !important;
  border-bottom: 3px solid var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon .modal-footer {
  background: var(--cb-float, #FFF9E6) !important;
  border-top: 3px solid var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon .modal-body {
  background: var(--cb-float, #FFF9E6) !important;
}

/* 輸入欄位 (input, select, textarea) 同步適配 */
body.theme-handdrawn-pencil input,
body.theme-handdrawn-pencil select,
body.theme-handdrawn-pencil textarea {
  background: var(--layer-4, #FAF9F5) !important;
  color: #2d3748 !important;
  border: 2px solid #2d3748 !important;
  border-radius: 4px 12px 3px 8px / 8px 3px 12px 4px !important;
  padding: 6px 12px !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}

body.theme-handdrawn-crayon input,
body.theme-handdrawn-crayon select,
body.theme-handdrawn-crayon textarea {
  background: var(--layer-4, var(--cb-card, #FFFDF6)) !important;
  color: var(--cb-ink, #1A1A1A) !important;
  border: 2.5px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 5px 8px / 8px 5px 10px 6px !important;
  padding: 6px 12px !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}

body.theme-handdrawn-crayon .page-header-pill {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--cb-float) !important; /* NOTE: 標題統計欄為 Layer 3 */
  border-bottom: 3px solid var(--cb-ink) !important;
  border-radius: 0 !important;
  margin: 0 0 16px 0 !important;
  padding: 12px 16px !important;
}

body.theme-handdrawn-pencil .page-header-pill {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #FAF9F5 !important;
  border-bottom: 2px solid #2d3748 !important;
  border-radius: 0 !important;
  margin: 0 0 16px 0 !important;
  padding: 12px 16px !important;
}

/* ─────────────────────────────────────────────────────────────
   手繪風格 (蠟筆/鉛筆) 追加優化與 Bug 修正 (v2 追加)
   ───────────────────────────────────────────────────────────── */

/* NOTE: 統一手繪大卡片容器 (.page-content) 的背景色與邊框，使其對齊 Layer 2 自訂顏色 */
body.theme-handdrawn-crayon .page-content {
  background: var(--cb-card) !important;
  border: 3px solid var(--cb-ink, #1A1A1A) !important;
  box-shadow: 6px 6px 0px 0px var(--cb-ink, #1A1A1A) !important;
  border-radius: 20px !important;
}

body.theme-handdrawn-pencil .page-content {
  background: var(--layer-2, #FAF9F5) !important;
  border: 2.5px solid #2d3748 !important;
  box-shadow: 6px 6px 0px #2d3748 !important;
  border-radius: 20px !important;
}

/* NOTE: 設定選單 (Settings Accordion) 手繪風適配，使其對齊 Layer 3 自訂顏色並套用手繪粗邊框 */
body.theme-handdrawn-crayon .sa-group {
  background: var(--cb-float) !important; /* Layer 3 */
  border: 3px solid var(--cb-ink) !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0px 0px var(--cb-ink) !important;
  overflow: visible !important;
}
body.theme-handdrawn-crayon .sa-header,
body.theme-handdrawn-crayon .sa-sub-header {
  background: transparent !important;
  border-bottom: 2px solid var(--cb-ink) !important;
  color: var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .sa-header:hover,
body.theme-handdrawn-crayon .sa-sub-header:hover {
  background: rgba(253, 224, 71, 0.3) !important;
}
body.theme-handdrawn-crayon .sa-body,
body.theme-handdrawn-crayon .sa-sub-body,
body.theme-handdrawn-crayon .sa-inner {
  background: transparent !important;
}

body.theme-handdrawn-pencil .sa-group {
  background: var(--layer-3, #FAF9F5) !important; /* Layer 3 */
  border: 2px solid #2d3748 !important;
  border-radius: 20px !important;
  box-shadow: 4px 4px 0px #2d3748 !important;
  overflow: visible !important;
}
body.theme-handdrawn-pencil .sa-header,
body.theme-handdrawn-pencil .sa-sub-header {
  background: transparent !important;
  border-bottom: 1.5px solid #2d3748 !important;
  color: #2d3748 !important;
}
body.theme-handdrawn-pencil .sa-header:hover,
body.theme-handdrawn-pencil .sa-sub-header:hover {
  background: #f7fafc !important;
}
body.theme-handdrawn-pencil .sa-body,
body.theme-handdrawn-pencil .sa-sub-body,
body.theme-handdrawn-pencil .sa-inner {
  background: transparent !important;
}

/* NOTE: 莫蘭迪摺疊選色器 (.morand-selector-wrap) 與選色儲存格 (.morand-cell) 手繪風適配 */
body.theme-handdrawn-crayon .morand-selector-wrap {
  border: 2.5px solid var(--cb-ink) !important;
  border-radius: 12px !important;
  background: transparent !important;
}
body.theme-handdrawn-crayon .morand-selector-header {
  background: transparent !important;
  border-bottom: 2px solid var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .morand-selector-header:hover {
  background: rgba(253, 224, 71, 0.3) !important;
}
body.theme-handdrawn-crayon .morand-selector-wrap.open .morand-selector-content {
  border-top: 2px solid var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .morand-cell {
  border: 2px solid transparent !important;
}
body.theme-handdrawn-crayon .morand-cell:hover {
  background: rgba(253, 224, 71, 0.2) !important;
  border-color: var(--cb-ink) !important;
  transform: translateY(-1px) !important;
}
body.theme-handdrawn-crayon .morand-cell.active {
  border-color: var(--cb-amber, #F59E0B) !important;
  background: rgba(253, 224, 71, 0.1) !important;
}
body.theme-handdrawn-crayon .morand-cell-name {
  color: var(--cb-ink) !important;
}

body.theme-handdrawn-pencil .morand-selector-wrap {
  border: 1.5px solid #2d3748 !important;
  border-radius: 12px !important;
  background: transparent !important;
}
body.theme-handdrawn-pencil .morand-selector-header {
  background: transparent !important;
  border-bottom: 1.5px solid #2d3748 !important;
}
body.theme-handdrawn-pencil .morand-selector-header:hover {
  background: #f7fafc !important;
}
body.theme-handdrawn-pencil .morand-selector-wrap.open .morand-selector-content {
  border-top: 1.5px solid #2d3748 !important;
}
body.theme-handdrawn-pencil .morand-cell {
  border: 1.5px solid transparent !important;
}
body.theme-handdrawn-pencil .morand-cell:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: #2d3748 !important;
  transform: translateY(-1px) !important;
}
body.theme-handdrawn-pencil .morand-cell.active {
  border-color: #2d3748 !important;
  background: rgba(0, 0, 0, 0.05) !important;
}
body.theme-handdrawn-pencil .morand-cell-name {
  color: #2d3748 !important;
}

/* A. 解決設定頁面標題列滾動不固定 */
body:not(.one-page-layout) .page-section {
  overflow: visible !important;
}

/* B. 投資報酬與 XIRR 卡片手繪風格適配 */
body.theme-handdrawn-pencil .inv-range-group,
body.theme-handdrawn-crayon .inv-range-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.theme-handdrawn-pencil #inv-return-card,
body.theme-handdrawn-pencil #nw-return-card {
  background: #FDE047 !important;
  border: 1.5px solid #2d3748 !important;
  box-shadow: 2px 2px 0px #2d3748 !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  color: #2d3748 !important;
}
body.theme-handdrawn-pencil #inv-return-card:hover {
  background: #F97316 !important;
}
body.theme-handdrawn-pencil #nw-return-card:hover {
  background: #FDE047 !important;
}
body.theme-handdrawn-pencil #inv-return-sub,
body.theme-handdrawn-pencil #nw-return-sub {
  color: #4a5568 !important;
}
body.theme-handdrawn-pencil #inv-return-cagr,
body.theme-handdrawn-pencil #nw-return-cagr {
  background: #FDE047 !important;
  border: 1.5px solid #2d3748 !important;
  box-shadow: 1px 1px 0px #2d3748 !important;
  border-radius: 4px !important;
  color: #2d3748 !important;
}

body.theme-handdrawn-crayon #inv-return-card,
body.theme-handdrawn-crayon #nw-return-card {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--cb-ink, #1A1A1A) !important;
  isolation: isolate !important;
}
/* 強制覆蓋 JS 動態寫入的綠色 — 改為墨水色 */
body.theme-handdrawn-crayon #inv-return-main,
body.theme-handdrawn-crayon #nw-return-main {
  color: var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon #inv-return-main *,
body.theme-handdrawn-crayon #nw-return-main * {
  color: var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon #inv-return-card::before,
body.theme-handdrawn-crayon #nw-return-card::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 4px !important;
  right: 1px !important;
  bottom: 5px !important;
  background: #FDE047 !important; /* 正常狀態為黃色 */
  transform: rotate(-0.5deg) scale(0.98) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
  transition: background 0.1s ease !important;
}
body.theme-handdrawn-crayon #inv-return-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  box-shadow: 5px 5px 0px 0px var(--cb-blue, #3B82F6) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transition: box-shadow 0.08s ease, transform 0.08s ease !important;
}
body.theme-handdrawn-crayon #nw-return-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 3px solid var(--cb-ink) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  box-shadow: none !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon #inv-return-card:hover {
  transform: translate(-2px, -2px) !important;
}
body.theme-handdrawn-crayon #inv-return-card:hover::before {
  background: #F97316 !important;
}
body.theme-handdrawn-crayon #nw-return-card:hover::before {
  background: #FDE047 !important;
}
body.theme-handdrawn-crayon #inv-return-card:hover::after {
  box-shadow: 7px 7px 0px 0px var(--cb-blue, #3B82F6) !important;
}
body.theme-handdrawn-crayon #inv-return-card:active {
  transform: translate(5px, 5px) !important;
}
body.theme-handdrawn-crayon #inv-return-card:active::after {
  box-shadow: 0px 0px 0px 0px var(--cb-blue, #3B82F6) !important;
}
body.theme-handdrawn-crayon #inv-return-sub,
body.theme-handdrawn-crayon #nw-return-sub {
  color: var(--cb-ink-soft) !important;
}
body.theme-handdrawn-crayon #inv-return-cagr,
body.theme-handdrawn-crayon #nw-return-cagr {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--cb-ink, #1A1A1A) !important;
  isolation: isolate !important;
  font-weight: 700 !important;
}
body.theme-handdrawn-crayon #inv-return-cagr::before,
body.theme-handdrawn-crayon #nw-return-cagr::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important; left: 4px !important; right: 1px !important; bottom: 5px !important;
  background: #FDE047 !important;
  transform: rotate(-0.8deg) scale(0.97) !important;
  border-radius: 6px 10px 4px 8px / 8px 4px 10px 6px !important;
  z-index: -2 !important;
  pointer-events: none !important;
  transition: background 0.1s ease !important;
}
body.theme-handdrawn-crayon #inv-return-cagr::after,
body.theme-handdrawn-crayon #nw-return-cagr::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  border: 2.5px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 4px 8px / 8px 4px 10px 6px !important;
  box-shadow: none !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon #inv-return-cagr:hover,
body.theme-handdrawn-crayon #nw-return-cagr:hover {
  background: transparent !important;
}
body.theme-handdrawn-crayon #inv-return-cagr:hover::before,
body.theme-handdrawn-crayon #nw-return-cagr:hover::before {
  background: #FDE047 !important;
}

/* C. AI 助手標題模糊與外框斷線修正 */
body.theme-handdrawn-crayon .ai-chat-panel .ai-chat-header,
body.theme-handdrawn-crayon .ai-chat-panel .ai-chat-messages,
body.theme-handdrawn-crayon .ai-chat-panel .ai-chat-input-bar {
  background: transparent !important;
}
body.theme-handdrawn-crayon .ai-chat-panel,
body.theme-handdrawn-crayon .ai-chat-input,
body.theme-handdrawn-crayon .ai-chat-send {
  font-family: 'Gamja Flower', 'Yusei Magic', 'Noto Sans TC', cursive, sans-serif !important;
}
body.theme-handdrawn-crayon .ai-chat-header-title {
  color: var(--cb-ink) !important;
}
body.theme-handdrawn-crayon .ai-chat-close svg {
  stroke: var(--cb-ink) !important;
}

body.theme-handdrawn-pencil .ai-chat-panel .ai-chat-header,
body.theme-handdrawn-pencil .ai-chat-panel .ai-chat-messages,
body.theme-handdrawn-pencil .ai-chat-panel .ai-chat-input-bar {
  background: transparent !important;
}
body.theme-handdrawn-pencil .ai-chat-header-title {
  color: #2d3748 !important;
}
body.theme-handdrawn-pencil .ai-chat-close svg {
  stroke: #2d3748 !important;
}

/* D. 清除微型/小工具按鈕的雙層偽元素，防止黑色遮擋 */
body.theme-handdrawn-crayon .tools-pill-item::before,
body.theme-handdrawn-crayon .tools-pill-item::after,
body.theme-handdrawn-crayon .cat-remove::before,
body.theme-handdrawn-crayon .cat-remove::after,
body.theme-handdrawn-crayon .ai-chat-close::before,
body.theme-handdrawn-crayon .ai-chat-close::after,
body.theme-handdrawn-crayon .ai-chat-send::before,
body.theme-handdrawn-crayon .ai-chat-send::after,
body.theme-handdrawn-crayon #btn-filter-close::before,
body.theme-handdrawn-crayon #btn-filter-close::after {
  content: none !important;
}

body.theme-handdrawn-crayon .tools-pill-item,
body.theme-handdrawn-crayon .cat-remove,
body.theme-handdrawn-crayon .ai-chat-close,
body.theme-handdrawn-crayon .ai-chat-send,
body.theme-handdrawn-crayon #btn-filter-close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.theme-handdrawn-crayon .tools-pill-item:hover,
body.theme-handdrawn-crayon .cat-remove:hover,
body.theme-handdrawn-crayon .ai-chat-close:hover,
body.theme-handdrawn-crayon .ai-chat-send:hover,
body.theme-handdrawn-crayon #btn-filter-close:hover {
  background: rgba(61, 184, 144, 0.25) !important;
  border-radius: 4px !important;
}

body.theme-handdrawn-crayon .tools-pill-item:hover svg,
body.theme-handdrawn-crayon .cat-remove:hover svg,
body.theme-handdrawn-crayon .ai-chat-send:hover svg {
  stroke: #3DB890 !important;
}

/* 針對刪除按鈕工具特化為珊瑚橘 */
body.theme-handdrawn-crayon .tools-pill-item.tools-pill-danger:hover {
  background: rgba(216, 90, 48, 0.2) !important;
}
body.theme-handdrawn-crayon .tools-pill-item.tools-pill-danger:hover svg {
  stroke: #D85A30 !important;
}

/* E. tools-pill 工具列整包設計為小藥丸外框 */
body.theme-handdrawn-crayon .tools-pill:not(.hidden) {
  position: absolute !important;
  background: var(--cb-card) !important;
  border: 2px solid var(--cb-ink) !important;
  border-radius: 20px !important;
  box-shadow: 3px 3px 0px 0px var(--cb-ink) !important;
  padding: 4px 8px !important;
  display: flex !important;
  gap: 4px !important;
}
body.theme-handdrawn-crayon .tools-pill-sep {
  background: var(--cb-ink) !important;
  width: 2px !important;
  height: 16px !important;
  margin: auto 4px !important;
}

body.theme-handdrawn-pencil .tools-pill:not(.hidden) {
  position: absolute !important;
  background: #FAF9F5 !important;
  border: 1.5px solid #2d3748 !important;
  border-radius: 20px !important;
  box-shadow: 2px 2px 0px #2d3748 !important;
  padding: 4px 8px !important;
  display: flex !important;
  gap: 4px !important;
}
body.theme-handdrawn-pencil .tools-pill-sep {
  background: #2d3748 !important;
  width: 1.5px !important;
  height: 16px !important;
  margin: auto 4px !important;
}

/* F. 適配全域 select option 背景與字體 */
body.theme-handdrawn-crayon select option {
  background: var(--cb-card) !important;
  color: var(--cb-ink) !important;
}
body.theme-handdrawn-pencil select option {
  background: #FAF9F5 !important;
  color: #2d3748 !important;
}

/* G. 資產負債表大類別行與總計列套用手繪風 */
body.theme-handdrawn-crayon .bs-outer-header {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  isolation: isolate !important;
  margin-bottom: 8px !important;
}
body.theme-handdrawn-crayon .bs-outer-header::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 3px !important;
  right: 1px !important;
  bottom: 3px !important;
  background: var(--cb-float) !important; /* NOTE: 流動資產等大折疊欄為 Layer 3 */
  transform: rotate(-0.2deg) scale(0.99) !important;
  border-radius: 6px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .bs-outer-header::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 2px solid var(--cb-ink) !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0px 0px var(--cb-ink) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body.theme-handdrawn-crayon .bs-total {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  isolation: isolate !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
body.theme-handdrawn-crayon .bs-total::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 3px !important;
  right: 1px !important;
  bottom: 3px !important;
  background: var(--cb-float) !important; /* NOTE: 總計列為 Layer 3 */
  transform: rotate(0.2deg) scale(0.99) !important;
  border-radius: 6px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .bs-total::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 2px solid var(--cb-ink) !important;
  border-radius: 6px !important;
  box-shadow: 4px 4px 0px 0px var(--cb-ink) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body.theme-handdrawn-pencil .bs-outer-header {
  position: relative !important;
  background: var(--layer-3, #FAF9F5) !important; /* NOTE: 大折疊欄為 Layer 3 */
  border: 1.5px solid #2d3748 !important;
  border-radius: 6px !important;
  box-shadow: 2px 2px 0px #2d3748 !important;
  margin-bottom: 8px !important;
}
body.theme-handdrawn-pencil .bs-total {
  position: relative !important;
  background: var(--layer-3, #FAF9F5) !important; /* NOTE: 總計列為 Layer 3 */
  border: 1.5px solid #2d3748 !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0px #2d3748 !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   手繪風格 (蠟筆/鉛筆) AI 對話窗字色與 Yearly Report 標籤清晰度優化 (v3 追加)
   ───────────────────────────────────────────────────────────── */

/* --- 1. 手繪蠟筆風 (theme-handdrawn-crayon) --- */
body.theme-handdrawn-crayon .ai-msg.ai,
body.theme-handdrawn-crayon .ai-msg.user {
  color: var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon .ai-chat-input::placeholder {
  color: var(--cb-ink-soft, rgba(26,26,26,0.45)) !important;
}
body.theme-handdrawn-crayon .page-subtitle,
body.theme-handdrawn-crayon .year-networth-label,
body.theme-handdrawn-crayon .label {
  color: var(--cb-ink-soft, rgba(26,26,26,0.65)) !important;
  opacity: 1 !important;
}
body.theme-handdrawn-crayon .modal-header,
body.theme-handdrawn-crayon .modal-footer,
body.theme-handdrawn-crayon .modal-body {
  background: var(--layer-3, var(--cb-float, #FFF9E6)) !important;
}
body.theme-handdrawn-crayon .fintech-ring-card {
  background: var(--layer-4, #FFFDF6) !important;
}

/* --- 2. 手繪鉛筆風 (theme-handdrawn-pencil) --- */
body.theme-handdrawn-pencil .ai-chat-input::placeholder {
  color: #718096 !important;
}
body.theme-handdrawn-pencil .page-subtitle,
body.theme-handdrawn-pencil .year-networth-label,
body.theme-handdrawn-pencil .label {
  color: #4a5568 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
body.theme-handdrawn-pencil .modal-header,
body.theme-handdrawn-pencil .modal-footer,
body.theme-handdrawn-pencil .modal-body {
  background: var(--layer-3, #FAF9F5) !important;
}
body.theme-handdrawn-pencil .chart-card,
body.theme-handdrawn-pencil #budget-progress-panel {
  padding: 12px 14px !important;
  overflow: hidden !important;
}
body.theme-handdrawn-pencil .chart-grid > div {
  overflow: hidden !important;
}
body.theme-handdrawn-pencil .fintech-ring-card {
  background: var(--layer-4, #ffffff) !important;
  border: 1.5px solid #2d3748 !important;
  box-shadow: 2px 2px 0px #2d3748 !important;
  padding: 2px 1px !important;
  margin: 1px !important;
}





/* ── 自動更新提示 banner ─────────────────────────────── */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#update-banner {
  animation: slideUpFade 0.3s ease;
}

/* ── 年度收支明細表：滾動時第一欄不透明與凍結「分類」儲存格 ── */
.sticky-section-text {
  position: sticky;
  left: 16px;
  display: inline-block;
  z-index: 25;
}

.yearly-table td.sticky-col {
  background-color: white !important;
  opacity: 1 !important;
}

/* 分類行與小計行的凍結儲存格背景色連動，避免透出或顏色不一 */
.yearly-table tr.section-header-row.teal td.sticky-col { background-color: #f0fdf9 !important; }
.yearly-table tr.section-header-row.rose td.sticky-col { background-color: #fff1f2 !important; }
.yearly-table tr.section-header-row.amber td.sticky-col { background-color: var(--amber-light) !important; }
.yearly-table tr.section-header-row.indigo td.sticky-col { background-color: rgba(224,231,255,0.6) !important; }

.yearly-table tr.section-subtotal-row.teal td.sticky-col { background-color: var(--teal-light) !important; }
.yearly-table tr.section-subtotal-row.rose td.sticky-col { background-color: rgba(255,228,230,0.6) !important; }
.yearly-table tr.section-subtotal-row.amber td.sticky-col { background-color: rgba(254,243,199,0.6) !important; }
.yearly-table tr.section-subtotal-row.indigo td.sticky-col { background-color: rgba(224,231,255,0.6) !important; }

/* hover 狀態的凍結儲存格背景 */
.yearly-table tr.data-row:hover td.sticky-col {
  background-color: var(--gray-50) !important;
}

/* 凍結「分類」表頭儲存格，使其同時對齊左側與頂部 */
.yearly-table thead th.sticky-col {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 45 !important;
  background-color: var(--gray-50) !important;
  opacity: 1 !important;
}

/* ── 手繪蠟筆風 (theme-handdrawn-crayon) 下的凍結欄位背景 ── */
body.theme-handdrawn-crayon .yearly-table td.sticky-col {
  background-color: #FFFDF6 !important;
}
body.theme-handdrawn-crayon .yearly-table tr.section-header-row.teal td.sticky-col,
body.theme-handdrawn-crayon .yearly-table tr.section-subtotal-row.teal td.sticky-col { background-color: #e6fcf5 !important; }
body.theme-handdrawn-crayon .yearly-table tr.section-header-row.rose td.sticky-col,
body.theme-handdrawn-crayon .yearly-table tr.section-subtotal-row.rose td.sticky-col { background-color: #fff0f3 !important; }
body.theme-handdrawn-crayon .yearly-table tr.section-header-row.amber td.sticky-col,
body.theme-handdrawn-crayon .yearly-table tr.section-subtotal-row.amber td.sticky-col { background-color: #fff9db !important; }
body.theme-handdrawn-crayon .yearly-table tr.section-header-row.indigo td.sticky-col,
body.theme-handdrawn-crayon .yearly-table tr.section-subtotal-row.indigo td.sticky-col { background-color: #edf2ff !important; }
body.theme-handdrawn-crayon .yearly-table tr.data-row:hover td.sticky-col {
  background-color: #FFF5D6 !important;
}
body.theme-handdrawn-crayon .yearly-table thead th.sticky-col {
  background-color: #FFFDF6 !important;
  background-image: linear-gradient(rgba(253, 224, 71, 0.4), rgba(253, 224, 71, 0.4)) !important;
}

/* ── 手繪鉛筆風 (theme-handdrawn-pencil) 下的凍結欄位背景 ── */
body.theme-handdrawn-pencil .yearly-table td.sticky-col {
  background-color: #FAF9F5 !important;
}
body.theme-handdrawn-pencil .yearly-table tr.data-row:hover td.sticky-col {
  background-color: #F0EEE4 !important;
}
body.theme-handdrawn-pencil .yearly-table thead th.sticky-col {
  background-color: #FAF9F5 !important;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.05) 5px, rgba(0,0,0,0.05) 7px) !important;
}

/* ── 星空主題 (theme-stardust) 下的凍結欄位背景 ── */
body.theme-stardust .yearly-table td.sticky-col {
  background-color: #1e1b4b !important;
}
body.theme-stardust .yearly-table thead th.sticky-col {
  background-color: #312e81 !important;
}

/* ── 9. 字型大小優化（考量年長者閱讀，全面放大字級） ─────────────────── */
body.theme-handdrawn-crayon {
  font-size: 18px !important;
}
body.theme-handdrawn-crayon input,
body.theme-handdrawn-crayon select,
body.theme-handdrawn-crayon textarea,
body.theme-handdrawn-crayon button {
  font-size: 16px !important;
}
body.theme-handdrawn-crayon .label,
body.theme-handdrawn-crayon .subtitle,
body.theme-handdrawn-crayon .year-networth-label {
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
}
body.theme-handdrawn-crayon .text-sm,
body.theme-handdrawn-crayon .badge,
body.theme-handdrawn-crayon .tag-disabled {
  font-size: 15px !important;
}
body.theme-handdrawn-crayon td,
body.theme-handdrawn-crayon th {
  font-size: 16px !important;
}
body.theme-handdrawn-crayon h2 {
  font-size: 26px !important; /* 月份/年度標題再次放大 */
}
body.theme-handdrawn-crayon h3 {
  font-size: 22px !important;
}
body.theme-handdrawn-crayon .tools-pill-item svg {
  width: 18px !important;
  height: 18px !important;
}

/* 針對 Gamja Flower 數字部分進行專屬年長者特大字級調整 */
body.theme-handdrawn-crayon .big-num {
  font-size: 30px !important; /* 金額大字放大至 30px */
}
body.theme-handdrawn-crayon .year-networth-value {
  font-size: 32px !important; /* 淨資產總額放大至 32px */
}
body.theme-handdrawn-crayon .header-flat-stats .val {
  font-size: 20px !important; /* 頂部餘額/支出/收入數字放大至 20px */
  font-weight: 700 !important;
}
body.theme-handdrawn-crayon td.text-right,
body.theme-handdrawn-crayon .mono,
body.theme-handdrawn-crayon .yearly-table td {
  font-size: 17px !important; /* 表格內金額數字放大至 17px */
}
body.theme-handdrawn-crayon .val-main {
  font-size: 18px !important; /* 投資市值主數放大 */
}
body.theme-handdrawn-crayon .val-sub {
  font-size: 14px !important; /* 投資成本次數稍微放大 */
}
body.theme-handdrawn-crayon input[type="number"] {
  font-size: 18px !important; /* 數字輸入框放大至 18px */
}
body.theme-handdrawn-crayon .percent {
  font-size: 18px !important; /* 預算百分比放大 */
}
body.theme-handdrawn-crayon #inv-return-cagr,
body.theme-handdrawn-crayon #nw-return-cagr {
  font-size: 22px !important; /* 年化報酬率數字放大 */
}

/* 月支出明細各綠框數字再放大一個等級（年長者優化） */
body.theme-handdrawn-crayon .month-nav h2 {
  font-size: 30px !important; /* 月份導航標題放大至 30px */
}
body.theme-handdrawn-crayon .header-flat-stats .val {
  font-size: 32px !important; /* 頂部餘額/支出/收入數字再放大二個等級至 32px */
}
body.theme-handdrawn-crayon .monthly-snap-page td.mono.text-gray {
  font-size: 18px !important; /* 表格日期數字放大至 18px */
}
body.theme-handdrawn-crayon .monthly-snap-page td.text-right,
body.theme-handdrawn-crayon .monthly-snap-page td.text-right div {
  font-size: 26px !important; /* 表格交易金額數字再放大二個等級至 26px，強制覆蓋內聯樣式 */
  font-weight: 700 !important;
}
body.theme-handdrawn-crayon .monthly-snap-page td.text-right div[style*="font-size: 11px"] {
  font-size: 13px !important; /* 換匯副金額放大至 13px */
}

/* ─────────────────────────────────────────────────────────────
   投資總市值樣式定義與各主題風格適配 (對齊淨資產總額) (v4 追加)
   ───────────────────────────────────────────────────────────── */
.inv-total-mv-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: inherit;
}
.inv-total-mv-label {
  font-size: 13px !important;
  color: var(--gray-500, #6b7280);
  font-weight: 700;
  margin-bottom: 2px;
}
.inv-total-mv-val {
  font-size: 28px !important;
  font-weight: 900;
  color: var(--bg-sidebar) !important;
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-family: 'SF Pro Display', monospace;
}

/* Glass 主題適配 */
body.theme-glass .inv-total-mv-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.theme-glass .inv-total-mv-label {
  color: var(--text-tertiary);
}
body.theme-glass .inv-total-mv-val {
  color: var(--glass-text) !important;
  text-shadow: var(--glass-text-shadow, none) !important;
}

/* Stardust 主題適配 */
body.theme-stardust .inv-total-mv-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.theme-stardust .inv-total-mv-label {
  color: #42628C;
}
body.theme-stardust .inv-total-mv-val {
  color: var(--bg-sidebar) !important;
}

/* 手繪主題適配 (pencil/crayon) */
body[class*="theme-handdrawn"] .inv-total-mv-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body[class*="theme-handdrawn"] .inv-total-mv-label {
  color: var(--ink-soft, #2d2000);
}
body[class*="theme-handdrawn"] .inv-total-mv-val {
  color: var(--bg-sidebar) !important;
}

/* 針對手繪蠟筆風字體放大優化 (對齊 .year-networth-value 的 32px) */
body.theme-handdrawn-crayon .inv-total-mv-val,
body.theme-handdrawn-crayon .year-networth-value {
  font-family: 'Gamja Flower', 'Yusei Magic', cursive !important;
}
body.theme-handdrawn-crayon .inv-total-mv-val {
  font-size: 32px !important;
}

/* ── 修正浮動按鈕 (FAB) 點擊不靈敏問題 ── */
/* 1. 將動畫過渡時間縮短為 0.1s，讓反應更即時，避免 0.4s 造成的卡頓感 */
body.theme-handdrawn-crayon .ai-assistant-fab,
body.theme-handdrawn-crayon .fab-add {
  position: fixed !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* 2. 避免按壓時整個按鈕平移，導致滑鼠/手指因為按鈕位移而「滑出」點擊判定區 */
body.theme-handdrawn-crayon .ai-assistant-fab:active,
body.theme-handdrawn-crayon .fab-add:active {
  transform: none !important;
}

/* 3. 僅平移內部元素與偽元素，保持按鈕本體（點擊感應區）位置不動 */
body.theme-handdrawn-crayon .ai-assistant-fab:active svg,
body.theme-handdrawn-crayon .fab-add:active svg {
  transform: translate(4px, 4px) !important;
}
body.theme-handdrawn-crayon .ai-assistant-fab:active::before,
body.theme-handdrawn-crayon .fab-add:active::before {
  transform: translate(4px, 4px) rotate(-1deg) scale(0.98) !important;
}
body.theme-handdrawn-crayon .ai-assistant-fab:active::after,
body.theme-handdrawn-crayon .fab-add:active::after {
  transform: translate(4px, 4px) !important;
  box-shadow: 0px 0px 0px 0px transparent !important;
}

/* --- AI 小助手對話窗統一數字字體為 Gamja Flower --- */
.ai-chat-panel,
.ai-chat-panel input,
.ai-chat-panel textarea,
.ai-chat-panel button,
.ai-chat-panel select,
.ai-chat-panel * {
  font-family: 'Gamja Flower', -apple-system, 'Helvetica Neue', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif !important;
}

/* 針對手繪鉛筆風 (theme-handdrawn-pencil) 中文與英文手寫感 fallback */
body.theme-handdrawn-pencil .ai-chat-panel,
body.theme-handdrawn-pencil .ai-chat-panel input,
body.theme-handdrawn-pencil .ai-chat-panel textarea,
body.theme-handdrawn-pencil .ai-chat-panel button,
body.theme-handdrawn-pencil .ai-chat-panel select,
body.theme-handdrawn-pencil .ai-chat-panel * {
  font-family: 'Gamja Flower', 'Zen Kurenaido', 'Architects Daughter', cursive, sans-serif !important;
}

/* 針對手繪蠟筆風 (theme-handdrawn-crayon) 中文與英文手寫感 fallback */
body.theme-handdrawn-crayon .ai-chat-panel,
body.theme-handdrawn-crayon .ai-chat-panel input,
body.theme-handdrawn-crayon .ai-chat-panel textarea,
body.theme-handdrawn-crayon .ai-chat-panel button,
body.theme-handdrawn-crayon .ai-chat-panel select,
body.theme-handdrawn-crayon .ai-chat-panel * {
  font-family: 'Gamja Flower', 'Yusei Magic', 'Noto Sans TC', cursive, sans-serif !important;
}

/* 針對星空主題 (theme-stardust) 中文與英文 fallback */
body.theme-stardust .ai-chat-panel,
body.theme-stardust .ai-chat-panel input,
body.theme-stardust .ai-chat-panel textarea,
body.theme-stardust .ai-chat-panel button,
body.theme-stardust .ai-chat-panel select,
body.theme-stardust .ai-chat-panel * {
  font-family: 'Gamja Flower', 'Yusei Magic', 'Noto Sans TC', cursive, sans-serif !important;
}

/* =============================================================================
   🤖 AI Assistant Layout & Font 1.5x Scaling
   ============================================================================= */

/* 1. 對話面板寬度與排版調整 */
.ai-chat-panel {
  width: 40% !important;
  min-width: 540px !important;
  z-index: 11000 !important; /* 置於最上層，不被懸浮按鈕或其他元素遮擋 */
}

.ai-chat-header {
  padding: 24px 30px !important;
}

.ai-chat-header-title {
  font-size: 22.5px !important;
  gap: 12px !important;
}

.ai-chat-header-title span {
  font-size: 16.5px !important;
  padding: 3px 9px !important;
  border-radius: 9px !important;
}

.ai-chat-close {
  width: 42px !important;
  height: 42px !important;
}

.ai-chat-close svg {
  width: 22px !important;
  height: 22px !important;
}

.ai-chat-messages {
  padding: 30px !important;
  gap: 24px !important;
}

/* 2. 滾動拉桿/滑桿 (Scrollbar) 尺寸加大 */
.ai-chat-messages::-webkit-scrollbar {
  width: 8px !important;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
  border-radius: 6px !important;
}

/* 3. 對話泡泡與字體放大 50% */
.ai-msg {
  padding: 18px 24px !important;
  border-radius: 27px !important;
  font-size: 20.25px !important;
  line-height: 1.6 !important;
  max-width: 100% !important; /* 拉大文字區，與對話窗一樣寬 */
  box-sizing: border-box !important;
}

.ai-msg.user {
  border-bottom-right-radius: 6px !important;
}

.ai-msg.ai {
  border-bottom-left-radius: 6px !important;
}

.ai-msg.system {
  padding: 12px 18px !important;
  font-size: 18px !important;
  border-radius: 18px !important;
}

/* 4. 智慧授權卡片 (Consent Card) 尺寸調整 */
.ai-consent-card {
  padding: 24px !important;
  gap: 18px !important;
  border-radius: 27px !important;
}

.ai-consent-header {
  font-size: 20.25px !important;
  gap: 12px !important;
}

.ai-consent-body {
  font-size: 18.75px !important;
  line-height: 1.6 !important;
}

.ai-consent-btn-group {
  gap: 12px !important;
}

.ai-consent-btn {
  padding: 12px 18px !important;
  border-radius: 15px !important;
  font-size: 18px !important;
  gap: 6px !important;
}

/* 5. 輸入區域與按鈕尺寸調整 */
.ai-chat-input-bar {
  padding: 20px 24px !important;
  gap: 15px !important;
}

.ai-chat-input {
  border-radius: 21px !important;
  padding: 15px 21px !important;
  font-size: 19.5px !important;
}

.ai-chat-send {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
}

.ai-chat-send svg {
  width: 24px !important;
  height: 24px !important;
}

/* 6. 思考中動畫 (Thinking dots) 尺寸調整 */
.ai-typing-wave {
  padding: 12px 18px !important;
  gap: 6px !important;
}

.ai-dot {
  width: 9px !important;
  height: 9px !important;
}

/* 7. 內部迷你圖表 (Sparklines) 尺寸與字體調整 */
.ai-sparkline-container {
  margin-top: 12px !important;
  padding: 15px !important;
  border-radius: 18px !important;
}

.ai-sparkline-title {
  font-size: 17.25px !important;
  margin-bottom: 9px !important;
}

.ai-sparkline-canvas {
  height: 120px !important;
}

/* 8. 懸浮按鈕 (FAB) 保持原有尺寸（與 + 新增按鈕一致） */
.ai-assistant-fab {
  width: 60px !important;
  height: 60px !important;
  border-radius: 20px !important;
  bottom: 100px !important;
}

.ai-assistant-fab svg {
  width: 28px !important;
  height: 28px !important;
}

/* 9. 手繪風主題特化 (Pencil/Crayon Theme overrides for enlarged bubble radius) */
body.theme-handdrawn-pencil .ai-msg.user {
  border-radius: 18px 27px 6px 21px / 27px 6px 21px 18px !important;
}

body.theme-handdrawn-pencil .ai-msg.ai {
  border-radius: 27px 18px 21px 6px / 6px 27px 18px 21px !important;
}

body.theme-handdrawn-crayon .ai-msg.user::before,
body.theme-handdrawn-crayon .ai-msg.user::after {
  border-radius: 18px 27px 6px 21px / 27px 6px 21px 18px !important;
}

body.theme-handdrawn-crayon .ai-msg.ai::before,
body.theme-handdrawn-crayon .ai-msg.ai::after {
  border-radius: 27px 18px 21px 6px / 6px 27px 18px 21px !important;
}

/* 手繪鉛筆風對話框外框與陰影圓角適配 */
body.theme-handdrawn-pencil .ai-chat-panel {
  border-radius: 382px 22px 337px 22px / 22px 337px 22px 382px !important;
}

body.theme-handdrawn-pencil .ai-chat-panel::after {
  border-radius: 22px 337px 22px 382px / 337px 22px 382px 22px !important;
}

/* 手繪蠟筆風圓角適配 */
body.theme-handdrawn-crayon .ai-chat-panel {
  border-radius: 36px 0 0 36px !important;
}

/* 10. 行動版/窄螢幕自適應滿版優化 */
@media (max-width: 768px) {
  .ai-chat-panel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
}

/* =============================================================================
   🤖 AI Choice Card & Buttons Theme Adapters
   ============================================================================= */

/* 1. 預設主題 (Morandi Green) 下的選擇卡片與元件樣式 */
.ai-consent-card {
  align-self: center;
  background: var(--white);
  border: 1.5px dashed var(--teal);
  border-radius: 18px;
  padding: 16px;
  width: 95%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.ai-consent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 13.5px;
}

.ai-consent-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ai-choice-slider-container {
  margin: 15px 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

.ai-choice-slider-container span {
  font-size: 12px;
  color: var(--text-muted);
}

.ai-choice-slider-input {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--gray-200);
  outline: none;
  cursor: pointer;
  accent-color: var(--teal);
  margin-bottom: 12px;
  display: block;
  -webkit-appearance: none;
}

.ai-custom-val-input {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--text-primary);
  font-size: 14px;
  text-align: center;
  outline: none;
}

.ai-custom-val-submit {
  padding: 8px 16px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--teal) 0%, #0d9488 100%) !important;
  color: #fff !important;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: opacity 0.2s;
}

.ai-custom-val-submit:hover {
  opacity: 0.9;
}

.ai-choice-custom-input {
  margin-top: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.ai-choice-custom-input .ai-custom-val-input {
  padding: 8px 12px;
  text-align: left;
}

/* 按鈕預設配色 */
.ai-consent-btn.confirm {
  background: linear-gradient(135deg, var(--teal) 0%, #0d9488 100%) !important;
  color: #fff !important;
}

.ai-consent-btn.cancel.exit {
  background: var(--red, #ef4444) !important;
  color: #fff !important;
}

.ai-consent-btn.cancel.prev {
  background: var(--gray-500, #64748b) !important;
  color: #fff !important;
}

/* 2. 星塵主題 (Stardust Theme) */
body.theme-stardust .ai-consent-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px dashed #6366f1;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);
}

body.theme-stardust .ai-consent-header {
  color: #a5b4fc;
}

body.theme-stardust .ai-consent-body {
  color: rgba(255, 255, 255, 0.8);
}

body.theme-stardust .ai-choice-slider-container {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-stardust .ai-choice-slider-container span {
  color: rgba(255, 255, 255, 0.5);
}

body.theme-stardust .ai-choice-slider-input {
  background: rgba(255, 255, 255, 0.2);
  accent-color: #6366f1;
}

body.theme-stardust .ai-custom-val-input {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

body.theme-stardust .ai-consent-btn.confirm,
body.theme-stardust .ai-custom-val-submit {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #fff !important;
}

/* 星塵傳送按鈕 */
body.theme-stardust .ai-chat-send {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: none !important;
}
body.theme-stardust .ai-chat-send:hover {
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

/* 3. 玻璃主題 - 白玻 (Glass Light Mode) */
body.theme-glass:not(.glass-dark-mode) .ai-consent-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px dashed rgba(15, 23, 42, 0.25);
  box-shadow: var(--glass-primary-shadow);
}

body.theme-glass:not(.glass-dark-mode) .ai-consent-header {
  color: #0f172a;
}

body.theme-glass:not(.glass-dark-mode) .ai-consent-body {
  color: #334155;
}

body.theme-glass:not(.glass-dark-mode) .ai-choice-slider-container {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-glass:not(.glass-dark-mode) .ai-choice-slider-container span {
  color: #64748b;
}

body.theme-glass:not(.glass-dark-mode) .ai-choice-slider-input {
  background: rgba(0, 0, 0, 0.1);
  accent-color: rgba(15, 23, 42, 0.85);
}

body.theme-glass:not(.glass-dark-mode) .ai-custom-val-input {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
  color: #0f172a;
}

body.theme-glass:not(.glass-dark-mode) .ai-consent-btn.confirm,
body.theme-glass:not(.glass-dark-mode) .ai-custom-val-submit {
  background: rgba(15, 23, 42, 0.85) !important;
  color: #fff !important;
}

/* 4. 玻璃主題 - 黑玻 (Glass Dark Mode) */
body.theme-glass.glass-dark-mode .ai-consent-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

body.theme-glass.glass-dark-mode .ai-consent-header {
  color: var(--teal-light, #2dd4bf);
}

body.theme-glass.glass-dark-mode .ai-consent-body {
  color: rgba(255, 255, 255, 0.8);
}

body.theme-glass.glass-dark-mode .ai-choice-slider-container {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-glass.glass-dark-mode .ai-choice-slider-container span {
  color: rgba(255, 255, 255, 0.5);
}

body.theme-glass.glass-dark-mode .ai-choice-slider-input {
  background: rgba(255, 255, 255, 0.2);
  accent-color: var(--teal);
}

body.theme-glass.glass-dark-mode .ai-custom-val-input {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

body.theme-glass.glass-dark-mode .ai-consent-btn.confirm,
body.theme-glass.glass-dark-mode .ai-custom-val-submit {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 黑玻傳送按鈕與使用者氣泡 */
body.theme-glass.glass-dark-mode .ai-msg.user {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
body.theme-glass.glass-dark-mode .ai-chat-send {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body.theme-glass.glass-dark-mode .ai-chat-send:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
}

/* 5. 手繪鉛筆風 (Pencil Theme) */
body.theme-handdrawn-pencil .ai-consent-card {
  background: #FAF9F5 !important;
  border: 2px solid #2d3748 !important;
  border-radius: 12px 18px 4px 14px / 18px 4px 14px 12px !important;
  box-shadow: 4px 4px 0px #2d3748 !important;
}

body.theme-handdrawn-pencil .ai-consent-header {
  color: #2d3748 !important;
}

body.theme-handdrawn-pencil .ai-consent-body {
  color: #2d3748 !important;
}

body.theme-handdrawn-pencil .ai-choice-slider-container {
  background: #FAF9F5 !important;
  border: 1.5px solid #2d3748 !important;
}

body.theme-handdrawn-pencil .ai-choice-slider-container span {
  color: #2d3748 !important;
}

body.theme-handdrawn-pencil .ai-choice-slider-input {
  background: #E2E8F0 !important;
  accent-color: #2d3748 !important;
}

body.theme-handdrawn-pencil .ai-custom-val-input {
  background: #FAF9F5 !important;
  border: 1.5px solid #2d3748 !important;
  color: #2d3748 !important;
}

body.theme-handdrawn-pencil .ai-consent-btn.confirm,
body.theme-handdrawn-pencil .ai-custom-val-submit {
  background: #FAF9F5 !important;
  color: #2d3748 !important;
  border: 1.5px solid #2d3748 !important;
  box-shadow: 2px 2px 0px #2d3748 !important;
  border-radius: 8px !important;
}
body.theme-handdrawn-pencil .ai-consent-btn.confirm:hover,
body.theme-handdrawn-pencil .ai-custom-val-submit:hover {
  background: #F4F2E9 !important;
}

/* 6. 手繪蠟筆風 (Crayon Theme) */
body.theme-handdrawn-crayon .ai-consent-card {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

body.theme-handdrawn-crayon .ai-consent-card::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 2px !important;
  right: 5px !important;
  bottom: 6px !important;
  background: var(--cb-card, #FFFDF6) !important;
  transform: rotate(0.5deg) scale(0.99) !important;
  border-radius: 12px 18px 4px 14px / 18px 4px 14px 12px !important;
  z-index: -2 !important;
}

body.theme-handdrawn-crayon .ai-consent-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 2.5px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 12px 18px 4px 14px / 18px 4px 14px 12px !important;
  box-shadow: -4px 4px 0px 0px var(--cb-green, #10B981) !important;
  z-index: -1 !important;
}

body.theme-handdrawn-crayon .ai-consent-header {
  color: var(--cb-ink, #1A1A1A) !important;
}

body.theme-handdrawn-crayon .ai-consent-body {
  color: var(--cb-ink, #1A1A1A) !important;
}

body.theme-handdrawn-crayon .ai-choice-slider-container {
  background: var(--cb-float, #FFF9E6) !important;
  border: 2px solid var(--cb-ink, #1A1A1A) !important;
}

body.theme-handdrawn-crayon .ai-choice-slider-container span {
  color: var(--cb-ink, #1A1A1A) !important;
}

body.theme-handdrawn-crayon .ai-choice-slider-input {
  background: rgba(0,0,0,0.1) !important;
  accent-color: var(--cb-ink, #1A1A1A) !important;
}

body.theme-handdrawn-crayon .ai-custom-val-input {
  background: var(--cb-card, #FFFDF6) !important;
  border: 2px solid var(--cb-ink, #1A1A1A) !important;
  color: var(--cb-ink, #1A1A1A) !important;
}

body.theme-handdrawn-crayon .ai-consent-btn {
  margin-bottom: 8px !important;
}

body.theme-handdrawn-crayon .ai-consent-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  background: var(--cb-card, #FFFDF6) !important;
  border-radius: 6px 10px 8px 12px / 10px 8px 12px 6px !important;
  z-index: -2 !important;
}

body.theme-handdrawn-crayon .ai-consent-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border: 2px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 8px 12px / 10px 8px 12px 6px !important;
  box-shadow: 3px 3px 0px 0px var(--cb-blue, #3B82F6) !important;
  z-index: -1 !important;
}

body.theme-handdrawn-crayon .ai-consent-btn.cancel.exit::after {
  box-shadow: 3px 3px 0px 0px var(--cb-red, #EF4444) !important;
}

body.theme-handdrawn-crayon .ai-consent-btn.cancel.prev::after {
  box-shadow: 3px 3px 0px 0px var(--cb-ink-soft, #4A4A4A) !important;
}

body.theme-handdrawn-crayon .ai-custom-val-submit {
  position: relative !important;
  background: var(--cb-card, #FFFDF6) !important;
  color: var(--cb-ink, #1A1A1A) !important;
  border: 2px solid var(--cb-ink, #1A1A1A) !important;
  box-shadow: 2px 2px 0px #1A1A1A !important;
}
body.theme-handdrawn-crayon .ai-custom-val-submit:hover {
  background: var(--cb-float, #FFF9E6) !important;
}

/* 7. 莫蘭迪系列主題 (Morandi Themes) */
[class*="theme-morand"] .ai-consent-card {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
}

[class*="theme-morand"] .ai-consent-header {
  color: var(--text-primary) !important;
}

[class*="theme-morand"] .ai-consent-body {
  color: var(--text-secondary) !important;
}

[class*="theme-morand"] .ai-choice-slider-container {
  background: var(--gray-50) !important;
  border: 1px solid var(--gray-100) !important;
}

[class*="theme-morand"] .ai-choice-slider-container span {
  color: var(--gray-500) !important;
}

[class*="theme-morand"] .ai-custom-val-input {
  background: var(--white) !important;
  border: 1px solid var(--gray-200) !important;
  color: var(--text-primary) !important;
}

[class*="theme-morand"] .ai-consent-btn.confirm,
[class*="theme-morand"] .ai-custom-val-submit {
  background: var(--teal) !important;
  color: var(--white) !important;
}

[class*="theme-morand"] .ai-msg.user {
  background: var(--teal-light) !important;
  color: var(--teal-dark) !important;
}
[class*="theme-morand"] .ai-chat-send {
  background: var(--teal) !important;
  color: var(--white) !important;
}



/* ── 蠟筆主題：券商篩選 select-minimal 不套用全域放大字體，保持欄位緊湊 ── */
body.theme-handdrawn-crayon .select-minimal {
  font-size: 13px !important;
  padding: 2px 4px !important;
  line-height: 1.3 !important;
}


/* ══════════════════════════════════════════════════════════════
   MoneyFlow Drive 匯入浮層 (.mf-drive-overlay)
   隨主題配色自動切換，各 theme class 依序覆蓋語意變數
   ══════════════════════════════════════════════════════════════ */

/* ── 背景遮罩 ─────────────────────────────────────────────── */
.mf-drive-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;           /* JS 控制顯示 */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── 主體卡片（預設＝淺薄荷） ─────────────────────────────── */
.mf-drive-modal {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 16px;
  width: min(480px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────── */
.mf-drive-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #99f6e4;
  flex-shrink: 0;
  background: rgba(20, 184, 166, 0.08);
}
.mf-drive-header-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #0f766e;
}
.mf-drive-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  color: #0f766e;
}
.mf-drive-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  color: rgba(15, 118, 110, 0.55);
  transition: color 0.15s, background 0.15s;
}
.mf-drive-close:hover { color: #0f766e; background: rgba(15,118,110,0.10); }
.mf-drive-close svg { width: 17px; height: 17px; }

/* ── Body / Footer ───────────────────────────────────────── */
.mf-drive-body { overflow-y: auto; flex: 1; }
.mf-drive-footer {
  padding: 12px 16px;
  border-top: 1px solid #99f6e4;
  flex-shrink: 0;
}

/* ── 提示文字 ─────────────────────────────────────────────── */
.mf-drive-hint {
  padding: 14px 16px 8px;
  font-size: 13px;
  color: rgba(15, 118, 110, 0.65);
  margin: 0;
}
.mf-drive-hint-em { color: #0f766e; }

/* ── 狀態訊息（查詢中 / 下載中 / 無檔案） ─────────────────── */
.mf-drive-status-msg {
  text-align: center;
  padding: 40px 20px;
  color: rgba(15, 118, 110, 0.55);
  margin: 0;
  font-size: 14px;
}

/* ── 檔案清單 ─────────────────────────────────────────────── */
.mf-file-list { overflow-y: auto; max-height: 320px; }
.mf-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #99f6e4;
  cursor: pointer;
  transition: background 0.15s;
}
.mf-file-row:hover { background: rgba(20, 184, 166, 0.08); }
.mf-file-icon { width: 20px; height: 20px; flex-shrink: 0; color: #0f766e; }
.mf-file-info { flex: 1; min-width: 0; }
.mf-file-name {
  font-weight: 600;
  font-size: 14px;
  color: #0f766e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mf-file-time { font-size: 12px; color: rgba(15,118,110,0.55); margin-top: 2px; }
.mf-file-chevron { width: 15px; height: 15px; flex-shrink: 0; color: rgba(15,118,110,0.4); }

/* ── 徽章 ─────────────────────────────────────────────────── */
.mf-drive-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.mf-drive-badge--auto  { background: rgba(255,149,0,0.15); color: #cc7a00; }
.mf-drive-badge--manual { background: rgba(20,184,166,0.15); color: #0f766e; }


/* ══ 莫蘭迪主題（全部共用同一套 --teal / --white / --gray-xxx 變數） ══ */
[class*="theme-morand"] .mf-drive-modal {
  background: var(--white);
  border-color: var(--gray-200);
}
[class*="theme-morand"] .mf-drive-header {
  background: rgba(0,0,0,0.04);
  border-bottom-color: var(--gray-200);
}
[class*="theme-morand"] .mf-drive-header-icon,
[class*="theme-morand"] .mf-drive-title { color: var(--teal-dark); }
[class*="theme-morand"] .mf-drive-close { color: var(--text-secondary); }
[class*="theme-morand"] .mf-drive-close:hover { color: var(--teal); background: var(--teal-light); }
[class*="theme-morand"] .mf-drive-hint { color: var(--text-secondary); }
[class*="theme-morand"] .mf-drive-hint-em { color: var(--text-primary); }
[class*="theme-morand"] .mf-drive-status-msg { color: var(--text-secondary); }
[class*="theme-morand"] .mf-drive-footer { border-top-color: var(--gray-200); }
[class*="theme-morand"] .mf-file-row { border-bottom-color: var(--gray-200); }
[class*="theme-morand"] .mf-file-row:hover { background: var(--gray-50); }
[class*="theme-morand"] .mf-file-icon { color: var(--teal); }
[class*="theme-morand"] .mf-file-name { color: var(--text-primary); }
[class*="theme-morand"] .mf-file-time { color: var(--text-secondary); }
[class*="theme-morand"] .mf-file-chevron { color: var(--gray-400); }
[class*="theme-morand"] .mf-drive-badge--manual { background: var(--teal-light); color: var(--teal-dark); }


/* ══ 星塵瀑布（深色磨砂） ══════════════════════════════════ */
body.theme-stardust .mf-drive-overlay { background: rgba(5, 10, 20, 0.65); }
body.theme-stardust .mf-drive-modal {
  background: rgba(22, 32, 50, 0.92);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  backdrop-filter: blur(20px);
}
body.theme-stardust .mf-drive-header {
  background: rgba(0,0,0,0.25);
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-stardust .mf-drive-header-icon { color: var(--teal, #1df2dd); }
body.theme-stardust .mf-drive-title { color: #f8fafc; }
body.theme-stardust .mf-drive-close { color: rgba(255,255,255,0.45); }
body.theme-stardust .mf-drive-close:hover { color: #ffffff; background: rgba(255,255,255,0.1); }
body.theme-stardust .mf-drive-hint { color: rgba(255,255,255,0.50); }
body.theme-stardust .mf-drive-hint-em { color: rgba(255,255,255,0.88); }
body.theme-stardust .mf-drive-status-msg { color: rgba(255,255,255,0.45); }
body.theme-stardust .mf-drive-footer { border-top-color: rgba(255,255,255,0.08); }
body.theme-stardust .mf-file-row { border-bottom-color: rgba(255,255,255,0.07); }
body.theme-stardust .mf-file-row:hover { background: rgba(255,255,255,0.06); }
body.theme-stardust .mf-file-icon { color: var(--teal, #1df2dd); }
body.theme-stardust .mf-file-name { color: #f8fafc; }
body.theme-stardust .mf-file-time { color: rgba(255,255,255,0.45); }
body.theme-stardust .mf-file-chevron { color: rgba(255,255,255,0.30); }
body.theme-stardust .mf-drive-badge--auto  { background: rgba(255,149,0,0.20); color: #ffb830; }
body.theme-stardust .mf-drive-badge--manual { background: rgba(29,242,221,0.15); color: var(--teal, #1df2dd); }


/* ══ 毛玻璃（Glass） ════════════════════════════════════════ */
body.theme-glass .mf-drive-overlay { background: rgba(15,23,42,0.30); }
body.theme-glass .mf-drive-modal {
  background: rgba(var(--glass-color-rgb, 255,255,255), 0.60);
  border-color: rgba(var(--glass-color-rgb, 255,255,255), 0.45);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
body.theme-glass .mf-drive-header {
  background: rgba(var(--glass-color-rgb, 255,255,255), 0.18);
  border-bottom-color: rgba(var(--glass-color-rgb, 255,255,255), 0.30);
}
body.theme-glass .mf-drive-header-icon,
body.theme-glass .mf-drive-title { color: var(--text-primary); }
body.theme-glass .mf-drive-close { color: var(--text-secondary); }
body.theme-glass .mf-drive-close:hover { background: rgba(var(--glass-color-rgb, 255,255,255), 0.25); }
body.theme-glass .mf-drive-hint { color: var(--text-secondary); }
body.theme-glass .mf-drive-hint-em { color: var(--text-primary); }
body.theme-glass .mf-drive-status-msg { color: var(--text-secondary); }
body.theme-glass .mf-drive-footer {
  border-top-color: rgba(var(--glass-color-rgb, 255,255,255), 0.30);
  background: rgba(var(--glass-color-rgb, 255,255,255), 0.10);
}
body.theme-glass .mf-file-row { border-bottom-color: rgba(var(--glass-color-rgb, 255,255,255), 0.25); }
body.theme-glass .mf-file-row:hover { background: rgba(var(--glass-color-rgb, 255,255,255), 0.18); }
body.theme-glass .mf-file-icon { color: var(--teal); }
body.theme-glass .mf-file-name { color: var(--text-primary); }
body.theme-glass .mf-file-time { color: var(--text-secondary); }
body.theme-glass .mf-file-chevron { color: var(--text-secondary); }
body.theme-glass .mf-drive-badge--manual { background: rgba(20,184,166,0.20); color: var(--teal); }


/* ══ 手繪鉛筆（Handdrawn Pencil）──── 草稿風格卡片邊框 ═══ */
body.theme-handdrawn-pencil .mf-drive-modal {
  background: var(--layer-3, #FAFAF7);
  border: 2px solid #2d3748;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 4px 0px #2d3748;
}
body.theme-handdrawn-pencil .mf-drive-header {
  background: transparent;
  border-bottom: 2px solid #2d3748;
  border-radius: 0;
}
body.theme-handdrawn-pencil .mf-drive-header-icon,
body.theme-handdrawn-pencil .mf-drive-title { color: #2d3748; }
body.theme-handdrawn-pencil .mf-drive-close { color: rgba(45,55,72,0.5); }
body.theme-handdrawn-pencil .mf-drive-close:hover { color: #2d3748; background: rgba(45,55,72,0.08); }
body.theme-handdrawn-pencil .mf-drive-hint { color: rgba(45,55,72,0.60); }
body.theme-handdrawn-pencil .mf-drive-hint-em { color: #2d3748; }
body.theme-handdrawn-pencil .mf-drive-status-msg { color: rgba(45,55,72,0.55); }
body.theme-handdrawn-pencil .mf-drive-footer { border-top: 2px solid #2d3748; }
body.theme-handdrawn-pencil .mf-file-row { border-bottom: 1px dashed rgba(45,55,72,0.25); }
body.theme-handdrawn-pencil .mf-file-row:hover { background: rgba(45,55,72,0.05); }
body.theme-handdrawn-pencil .mf-file-icon { color: #2d3748; }
body.theme-handdrawn-pencil .mf-file-name { color: #2d3748; }
body.theme-handdrawn-pencil .mf-file-time { color: rgba(45,55,72,0.55); }
body.theme-handdrawn-pencil .mf-file-chevron { color: rgba(45,55,72,0.35); }
body.theme-handdrawn-pencil .mf-drive-badge--manual { background: rgba(45,55,72,0.10); color: #2d3748; }


/* ══ 手繪蠟筆（Handdrawn Crayon）──── 繽紛色塊風格 ═══════ */
body.theme-handdrawn-crayon .mf-drive-modal {
  background: var(--layer-3, #FFFDF0);
  border: 2px solid #333;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #333;
}
body.theme-handdrawn-crayon .mf-drive-header {
  background: transparent;
  border-bottom: 2px solid #333;
}
body.theme-handdrawn-crayon .mf-drive-header-icon,
body.theme-handdrawn-crayon .mf-drive-title { color: #333; }
body.theme-handdrawn-crayon .mf-drive-close { color: rgba(51,51,51,0.5); }
body.theme-handdrawn-crayon .mf-drive-close:hover { background: rgba(51,51,51,0.08); color: #333; }
body.theme-handdrawn-crayon .mf-drive-hint { color: rgba(51,51,51,0.60); }
body.theme-handdrawn-crayon .mf-drive-hint-em { color: #333; }
body.theme-handdrawn-crayon .mf-drive-status-msg { color: rgba(51,51,51,0.55); }
body.theme-handdrawn-crayon .mf-drive-footer { border-top: 2px solid #333; }
body.theme-handdrawn-crayon .mf-file-row { border-bottom: 1px dashed rgba(51,51,51,0.20); }
body.theme-handdrawn-crayon .mf-file-row:hover { background: rgba(51,51,51,0.05); }
body.theme-handdrawn-crayon .mf-file-icon { color: #333; }
body.theme-handdrawn-crayon .mf-file-name { color: #333; }
body.theme-handdrawn-crayon .mf-file-time { color: rgba(51,51,51,0.55); }
body.theme-handdrawn-crayon .mf-file-chevron { color: rgba(51,51,51,0.35); }
body.theme-handdrawn-crayon .mf-drive-badge--manual { background: rgba(51,51,51,0.10); color: #333; }

/* ═══════════════════════════════════════════════════════════════
   手繪主題 補丁：filter-footer 配色 + input[type=color] 顯示修正
   ══════════════════════════════════════════════════════════════ */

/* ── 1. 篩選視窗 filter-footer 主題配色 ────────────────────── */
body.theme-handdrawn-crayon .filter-footer {
  background: var(--cb-float, #FFF9E6) !important;
  border-top: 3px solid var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-pencil .filter-footer {
  background: #FAF9F5 !important;
  border-top: 2px solid #2d3748 !important;
}
[class*="theme-morand"] .filter-footer {
  background: var(--layer-3, var(--gray-50)) !important;
  border-top: 1px solid var(--gray-100) !important;
}
body.theme-stardust .filter-footer {
  background: rgba(255, 255, 255, 0.03) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── 2. input[type="color"] 手繪主題排除：讓色塊正確顯示 ─── */
body.theme-handdrawn-crayon input[type="color"],
body.theme-handdrawn-pencil input[type="color"] {
  /* 覆蓋全局 input 樣式，讓瀏覽器原生顏色選擇器正常渲染 */
  background: transparent !important;
  border: 2px solid var(--cb-ink, #2d3748) !important;
  border-radius: 6px !important;
  padding: 2px !important;
  cursor: pointer !important;
  /* 寬高由 inline style 控制，這裡僅保留外觀 */
}
body.theme-handdrawn-crayon input[type="color"]::-webkit-color-swatch-wrapper,
body.theme-handdrawn-pencil input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
  border-radius: 4px;
}
body.theme-handdrawn-crayon input[type="color"]::-webkit-color-swatch,
body.theme-handdrawn-pencil input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   詞庫管理 Modal 完整主題系統
   涵蓋：tab-bar / synonym-card / engine-badge / chip / empty state
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. Tab Bar 基礎結構
   ────────────────────────────────────────────────────────────────── */
.synonym-tab-bar {
  display: flex;
  overflow-x: auto;
  flex-shrink: 0;
}
.synonym-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-width: 100px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.synonym-tab:hover {
  color: var(--text-primary);
  background: rgba(0,0,0,0.03);
}
.synonym-tab.active {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
  font-weight: 700;
}
.synonym-tab .icon-svg {
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────
   2. Synonym Card（每個 intent/key 的區塊）
   ────────────────────────────────────────────────────────────────── */
.synonym-card {
  background: var(--white, #fff);
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.synonym-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
}
.synonym-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.synonym-key-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.synonym-engine-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--teal-dark);
  background: var(--teal-light);
  border: 1px solid var(--teal, #14b8a6);
  padding: 2px 7px;
  border-radius: 4px;
  opacity: 0.9;
}
.synonym-tags {
  margin-bottom: 12px;
}
.synonym-chip {
  background: var(--teal-light);
  color: var(--teal-dark);
  border: 1px solid var(--teal, #14b8a6);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
}
.synonym-empty {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: italic;
}
.synonym-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.synonym-add-row .input {
  flex: 1;
}

/* ──────────────────────────────────────────────────────────────────
   3. 莫蘭迪主題
   ────────────────────────────────────────────────────────────────── */
[class*="theme-morand"] .synonym-tab-bar {
  border-bottom-color: var(--gray-200) !important;
}
[class*="theme-morand"] .synonym-tab {
  color: var(--text-secondary);
}
[class*="theme-morand"] .synonym-tab:hover {
  color: var(--text-primary);
  background: var(--gray-50);
}
[class*="theme-morand"] .synonym-tab.active {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
}
[class*="theme-morand"] .synonym-modal-content {
  background: var(--gray-50, #f8fafc);
  color: var(--text-primary);
}
[class*="theme-morand"] .synonym-card {
  background: var(--white, #fff);
  border-color: var(--gray-200);
}
[class*="theme-morand"] .synonym-card-header {
  border-bottom-color: var(--gray-100);
}
[class*="theme-morand"] .synonym-key-label {
  color: var(--text-primary);
}
[class*="theme-morand"] .synonym-engine-badge {
  color: var(--teal-dark);
  background: var(--teal-light);
  border-color: var(--teal);
}
[class*="theme-morand"] .synonym-chip {
  background: var(--teal-light);
  color: var(--teal-dark);
  border-color: var(--teal);
}
[class*="theme-morand"] #synonym-manager-modal-box .modal-footer {
  background: var(--gray-50, #f8fafc);
  border-top-color: var(--gray-200);
}

/* ──────────────────────────────────────────────────────────────────
   4. Glass 主題
   ────────────────────────────────────────────────────────────────── */
body.theme-glass .synonym-tab-bar {
  background: transparent;
  border-bottom-color: rgba(255,255,255,0.12) !important;
}
body.theme-glass .synonym-tab {
  color: var(--text-secondary);
}
body.theme-glass .synonym-tab:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
body.theme-glass .synonym-tab.active {
  color: var(--glass-ui-text, #f8fafc);
  border-bottom-color: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.7);
}
body.theme-glass .synonym-modal-content {
  background: transparent;
  color: var(--text-primary);
}
body.theme-glass .synonym-card {
  background: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.08);
  border-color: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.12);
  backdrop-filter: blur(8px);
}
body.theme-glass .synonym-card-header {
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-glass .synonym-key-label {
  color: var(--text-primary);
}
body.theme-glass .synonym-engine-badge {
  color: var(--glass-ui-text, #f8fafc);
  background: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.15);
  border-color: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.3);
}
body.theme-glass .synonym-chip {
  background: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.15);
  color: var(--glass-ui-text, #f8fafc);
  border-color: rgba(var(--glass-ui-color-rgb, 255,255,255), 0.3);
}
body.theme-glass .synonym-empty {
  color: var(--text-secondary);
}

/* ──────────────────────────────────────────────────────────────────
   5. Stardust 主題
   ────────────────────────────────────────────────────────────────── */
body.theme-stardust .synonym-tab-bar {
  background: transparent;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
body.theme-stardust .synonym-tab {
  color: var(--text-secondary);
}
body.theme-stardust .synonym-tab:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
}
body.theme-stardust .synonym-tab.active {
  color: var(--teal, #14b8a6);
  border-bottom-color: var(--teal, #14b8a6);
}
body.theme-stardust .synonym-modal-content {
  background: transparent;
  color: var(--text-primary);
}
body.theme-stardust .synonym-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
body.theme-stardust .synonym-card-header {
  border-bottom-color: rgba(255,255,255,0.06);
}
body.theme-stardust .synonym-key-label {
  color: var(--text-primary);
}
body.theme-stardust .synonym-engine-badge {
  color: var(--teal-light, #2dd4bf);
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.25);
}
body.theme-stardust .synonym-chip {
  background: rgba(20, 184, 166, 0.12);
  color: var(--teal-light, #2dd4bf);
  border-color: rgba(20, 184, 166, 0.25);
}
body.theme-stardust #synonym-manager-modal-box .modal-footer {
  background: transparent;
  border-top-color: rgba(255,255,255,0.08);
}

/* ──────────────────────────────────────────────────────────────────
   6. 手繪鉛筆（Pencil）主題
   ────────────────────────────────────────────────────────────────── */
body.theme-handdrawn-pencil .synonym-tab-bar {
  background: #FAF9F5 !important;
  border-bottom: 2px solid #2d3748 !important;
}
body.theme-handdrawn-pencil .synonym-tab {
  font-family: 'Yusei Magic', 'Noto Sans TC', cursive !important;
  color: rgba(45,55,72,0.55) !important;
  border-bottom: 3px solid transparent !important;
  /* 覆蓋 handdrawn button 的 position:relative & background */
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* 覆蓋手繪主題的 button::after 手繪邊框（synonym-tab 不需要手繪邊框） */
body.theme-handdrawn-pencil .synonym-tab::after,
body.theme-handdrawn-pencil .synonym-tab::before {
  display: none !important;
}
body.theme-handdrawn-pencil .synonym-tab:hover {
  color: #2d3748 !important;
  background: rgba(45,55,72,0.05) !important;
  transform: none !important;
}
body.theme-handdrawn-pencil .synonym-tab.active {
  color: #2d3748 !important;
  border-bottom-color: #2d3748 !important;
  font-weight: 700 !important;
}
body.theme-handdrawn-pencil .synonym-tab .icon-svg {
  stroke: currentColor !important;
}
body.theme-handdrawn-pencil .synonym-modal-content {
  background: #FAF9F5 !important;
  color: #2d3748 !important;
}
body.theme-handdrawn-pencil .synonym-card {
  background: #FAF9F5 !important;
  border: 2px solid #2d3748 !important;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  box-shadow: 3px 3px 0px #2d3748 !important;
}
body.theme-handdrawn-pencil .synonym-card-header {
  border-bottom: 1px dashed rgba(45,55,72,0.3) !important;
}
body.theme-handdrawn-pencil .synonym-key-label {
  color: #2d3748 !important;
  font-family: 'Yusei Magic', cursive !important;
}
body.theme-handdrawn-pencil .synonym-engine-badge {
  color: #2d3748 !important;
  background: rgba(45,55,72,0.08) !important;
  border: 1px dashed #2d3748 !important;
  border-radius: 4px !important;
  font-family: 'Yusei Magic', cursive !important;
}
body.theme-handdrawn-pencil .synonym-chip {
  background: rgba(45,55,72,0.07) !important;
  color: #2d3748 !important;
  border: 1px solid rgba(45,55,72,0.4) !important;
  border-radius: 6px 10px 4px 8px / 8px 4px 10px 6px !important;
}
body.theme-handdrawn-pencil .synonym-empty {
  color: rgba(45,55,72,0.45) !important;
  font-family: 'Yusei Magic', cursive !important;
}
body.theme-handdrawn-pencil #synonym-manager-modal-box .modal-footer {
  background: #FAF9F5 !important;
  border-top: 2px solid #2d3748 !important;
}

/* ──────────────────────────────────────────────────────────────────
   7. 手繪蠟筆（Crayon）主題
   ────────────────────────────────────────────────────────────────── */
body.theme-handdrawn-crayon .synonym-tab-bar {
  background: var(--cb-float, #FFF9E6) !important;
  border-bottom: 3px solid var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon .synonym-tab {
  font-family: 'Yusei Magic', 'Noto Sans TC', cursive !important;
  color: var(--cb-ink-soft, #4A4A4A) !important;
  border-bottom: 4px solid transparent !important;
  /* 取消手繪 btn-outline 的 ::before/::after 效果 */
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: auto !important;
}
body.theme-handdrawn-crayon .synonym-tab::before,
body.theme-handdrawn-crayon .synonym-tab::after {
  display: none !important;
}
body.theme-handdrawn-crayon .synonym-tab:hover {
  color: var(--cb-ink, #1A1A1A) !important;
  background: rgba(26,26,26,0.05) !important;
  transform: none !important;
}
body.theme-handdrawn-crayon .synonym-tab.active {
  color: var(--cb-ink, #1A1A1A) !important;
  border-bottom-color: var(--cb-ink, #1A1A1A) !important;
  font-weight: 700 !important;
}
body.theme-handdrawn-crayon .synonym-tab .icon-svg {
  stroke: currentColor !important;
}
body.theme-handdrawn-crayon .synonym-modal-content {
  background: var(--cb-float, #FFF9E6) !important;
  color: var(--cb-ink, #1A1A1A) !important;
}
body.theme-handdrawn-crayon .synonym-card {
  /* 手繪蠟筆：用 ::before/::after 做陰影效果，card 本體透明 */
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate !important;
  margin-bottom: 20px !important;
}
body.theme-handdrawn-crayon .synonym-card::before {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  left: 6px !important;
  right: 2px !important;
  bottom: 8px !important;
  background: var(--cb-float, #FFFDF6) !important;
  transform: rotate(-0.4deg) scale(0.99) !important;
  border-radius: 8px 12px 6px 10px / 10px 6px 12px 8px !important;
  z-index: -2 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .synonym-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 3px solid var(--cb-ink, #1A1A1A) !important;
  border-radius: 6px 10px 8px 12px / 10px 8px 12px 6px !important;
  box-shadow: 5px 5px 0px 0px var(--cb-ink, #1A1A1A) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
body.theme-handdrawn-crayon .synonym-card-header {
  border-bottom: 1px dashed rgba(26,26,26,0.25) !important;
}
body.theme-handdrawn-crayon .synonym-key-label {
  color: var(--cb-ink, #1A1A1A) !important;
  font-family: 'Palette Mosaic', 'Yusei Magic', cursive !important;
}
body.theme-handdrawn-crayon .synonym-engine-badge {
  color: var(--cb-ink, #1A1A1A) !important;
  background: rgba(26,26,26,0.07) !important;
  border: 1px dashed var(--cb-ink, #1A1A1A) !important;
  border-radius: 4px !important;
  font-family: 'Yusei Magic', cursive !important;
  font-size: 11px !important;
}
body.theme-handdrawn-crayon .synonym-chip {
  background: rgba(91,155,213,0.12) !important;  /* cb-blue 淡底 */
  color: var(--cb-ink, #1A1A1A) !important;
  border: 2px solid var(--cb-blue, #5B9BD5) !important;
  border-radius: 8px 12px 6px 10px / 6px 10px 12px 8px !important;
  font-family: 'Yusei Magic', cursive !important;
}
body.theme-handdrawn-crayon .synonym-empty {
  color: var(--cb-ink-soft, #4A4A4A) !important;
  font-style: italic !important;
  font-family: 'Yusei Magic', cursive !important;
  opacity: 0.6 !important;
}
body.theme-handdrawn-crayon #synonym-manager-modal-box .modal-footer {
  background: var(--cb-float, #FFF9E6) !important;
  border-top: 3px solid var(--cb-ink, #1A1A1A) !important;
}


/* ═══════════════════════════════════════════════════════════════
   匯出 Excel 區間選擇彈窗 (.excel-range-*)
   平行於 .mf-drive-* 架構，各主題依序覆蓋
   ═══════════════════════════════════════════════════════════════ */

/* ── 背景遮罩 ─────────────────────────────────────────────── */
.excel-range-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── 主體卡片（預設＝淺薄荷） ─────────────────────────────── */
.excel-range-modal {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 18px;
  width: min(380px, 93vw);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────── */
.excel-range-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #99f6e4;
  background: rgba(20, 184, 166, 0.08);
  flex-shrink: 0;
}
.excel-range-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.excel-range-header-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #0f766e;
}
.excel-range-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f766e;
}
.excel-range-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: rgba(15, 118, 110, 0.55);
  transition: color 0.15s, background 0.15s;
}
.excel-range-close:hover { color: #0f766e; background: rgba(15,118,110,0.10); }
.excel-range-close svg { width: 14px; height: 14px; }

/* ── Body ────────────────────────────────────────────────── */
.excel-range-hint {
  margin: 14px 18px 4px;
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(15, 118, 110, 0.65);
  background: rgba(20, 184, 166, 0.06);
  border: 1px solid #99f6e4;
  border-radius: 10px;
}
.excel-range-field {
  padding: 10px 18px 0;
}
.excel-range-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 118, 110, 0.65);
  margin-bottom: 6px;
}
.excel-range-selects {
  display: flex;
  gap: 10px;
}
.excel-range-select {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #99f6e4;
  background: rgba(20, 184, 166, 0.06);
  color: #0f766e;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s;
}
.excel-range-select:focus { outline: none; border-color: #14b8a6; }

/* ── 預覽文字 ─────────────────────────────────────────────── */
.excel-range-preview {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
  min-height: 24px;
  padding: 12px 18px 4px;
}
.excel-range-preview--error { color: #ef4444 !important; }

/* ── Footer 按鈕 ─────────────────────────────────────────── */
.excel-range-footer {
  display: flex;
  gap: 10px;
  padding: 14px 18px 18px;
}
.excel-range-btn-cancel {
  flex: 1;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #99f6e4;
  background: transparent;
  color: rgba(15, 118, 110, 0.65);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.excel-range-btn-cancel:hover { background: rgba(20,184,166,0.08); color: #0f766e; }
.excel-range-btn-confirm {
  flex: 2;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: var(--btn-primary-bg, #14b8a6);
  color: var(--btn-primary-text, #ffffff);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s, filter 0.15s;
}
.excel-range-btn-confirm:hover:not(:disabled) { filter: brightness(1.08); }
.excel-range-btn-confirm svg { width: 15px; height: 15px; flex-shrink: 0; }
.excel-range-btn-confirm--disabled,
.excel-range-btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; }


/* ══ 莫蘭迪主題（共用 --teal / --white / --gray-xxx 變數） ══ */
[class*="theme-morand"] .excel-range-modal {
  background: var(--white);
  border-color: var(--gray-200);
}
[class*="theme-morand"] .excel-range-header {
  background: rgba(0,0,0,0.04);
  border-bottom-color: var(--gray-200);
}
[class*="theme-morand"] .excel-range-header-icon,
[class*="theme-morand"] .excel-range-title { color: var(--teal-dark); }
[class*="theme-morand"] .excel-range-close { color: var(--text-secondary); }
[class*="theme-morand"] .excel-range-close:hover { color: var(--teal); background: var(--teal-light); }
[class*="theme-morand"] .excel-range-hint {
  color: var(--text-secondary);
  background: var(--gray-50);
  border-color: var(--gray-200);
}
[class*="theme-morand"] .excel-range-label { color: var(--text-secondary); }
[class*="theme-morand"] .excel-range-select {
  background: var(--gray-50);
  color: var(--text-primary);
  border-color: var(--gray-200);
}
[class*="theme-morand"] .excel-range-select:focus { border-color: var(--teal); }
[class*="theme-morand"] .excel-range-preview { color: var(--teal-dark); }
[class*="theme-morand"] .excel-range-btn-cancel {
  border-color: var(--gray-200);
  color: var(--text-secondary);
}
[class*="theme-morand"] .excel-range-btn-cancel:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}


/* ══ 星塵瀑布（深色磨砂）══════════════════════════════════ */
body.theme-stardust .excel-range-overlay { background: rgba(5, 10, 20, 0.65); }
body.theme-stardust .excel-range-modal {
  background: rgba(22, 32, 50, 0.92);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.theme-stardust .excel-range-header {
  background: rgba(0,0,0,0.25);
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-stardust .excel-range-header-icon { color: var(--teal, #1df2dd); }
body.theme-stardust .excel-range-title { color: #f8fafc; }
body.theme-stardust .excel-range-close { color: rgba(255,255,255,0.45); }
body.theme-stardust .excel-range-close:hover { color: #ffffff; background: rgba(255,255,255,0.10); }
body.theme-stardust .excel-range-hint {
  color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
body.theme-stardust .excel-range-label { color: rgba(255,255,255,0.50); }
body.theme-stardust .excel-range-select {
  background: rgba(255,255,255,0.06);
  color: #f8fafc;
  border-color: rgba(255,255,255,0.12);
}
body.theme-stardust .excel-range-select:focus { border-color: var(--teal, #1df2dd); }
body.theme-stardust .excel-range-preview { color: var(--teal, #1df2dd); }
body.theme-stardust .excel-range-btn-cancel {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.55);
}
body.theme-stardust .excel-range-btn-cancel:hover {
  background: rgba(255,255,255,0.08);
  color: #f8fafc;
}


/* ══ 毛玻璃（Glass）════════════════════════════════════════ */
body.theme-glass .excel-range-overlay { background: rgba(15,23,42,0.30); }
body.theme-glass .excel-range-modal {
  background: rgba(var(--glass-color-rgb, 255,255,255), 0.60);
  border-color: rgba(var(--glass-color-rgb, 255,255,255), 0.45);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
body.theme-glass .excel-range-header {
  background: rgba(var(--glass-color-rgb, 255,255,255), 0.18);
  border-bottom-color: rgba(var(--glass-color-rgb, 255,255,255), 0.30);
}
body.theme-glass .excel-range-header-icon,
body.theme-glass .excel-range-title { color: var(--text-primary); }
body.theme-glass .excel-range-close { color: var(--text-secondary); }
body.theme-glass .excel-range-close:hover { background: rgba(var(--glass-color-rgb, 255,255,255), 0.25); }
body.theme-glass .excel-range-hint {
  color: var(--text-secondary);
  background: rgba(var(--glass-color-rgb, 255,255,255), 0.12);
  border-color: rgba(var(--glass-color-rgb, 255,255,255), 0.30);
}
body.theme-glass .excel-range-label { color: var(--text-secondary); }
body.theme-glass .excel-range-select {
  background: rgba(var(--glass-color-rgb, 255,255,255), 0.15);
  color: var(--text-primary);
  border-color: rgba(var(--glass-color-rgb, 255,255,255), 0.30);
}
body.theme-glass .excel-range-select:focus { border-color: var(--teal); }
body.theme-glass .excel-range-preview { color: var(--teal, #14b8a6); }
body.theme-glass .excel-range-btn-cancel {
  border-color: rgba(var(--glass-color-rgb, 255,255,255), 0.30);
  color: var(--text-secondary);
}
body.theme-glass .excel-range-btn-cancel:hover {
  background: rgba(var(--glass-color-rgb, 255,255,255), 0.18);
  color: var(--text-primary);
}


/* ══ 手繪鉛筆（Handdrawn Pencil）──── 草稿筆記風 ═══════════ */
body.theme-handdrawn-pencil .excel-range-modal {
  background: var(--layer-3, #FAFAF7);
  border: 2px solid #2d3748;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 4px 0px #2d3748;
}
body.theme-handdrawn-pencil .excel-range-header {
  background: transparent;
  border-bottom: 2px solid #2d3748;
}
body.theme-handdrawn-pencil .excel-range-header-icon,
body.theme-handdrawn-pencil .excel-range-title { color: #2d3748; }
body.theme-handdrawn-pencil .excel-range-close { color: rgba(45,55,72,0.50); }
body.theme-handdrawn-pencil .excel-range-close:hover { color: #2d3748; background: rgba(45,55,72,0.08); }
body.theme-handdrawn-pencil .excel-range-hint {
  color: rgba(45,55,72,0.60);
  background: rgba(45,55,72,0.04);
  border: 1px dashed rgba(45,55,72,0.30);
}
body.theme-handdrawn-pencil .excel-range-label { color: rgba(45,55,72,0.60); }
body.theme-handdrawn-pencil .excel-range-select {
  background: rgba(45,55,72,0.04);
  color: #2d3748;
  border: 1px solid #2d3748;
  border-radius: 6px 10px 4px 8px / 8px 4px 10px 6px;
}
body.theme-handdrawn-pencil .excel-range-select:focus { border-color: #2d3748; outline: none; }
body.theme-handdrawn-pencil .excel-range-preview { color: #2d3748; }
body.theme-handdrawn-pencil .excel-range-btn-cancel {
  border: 1px solid #2d3748;
  color: rgba(45,55,72,0.65);
  border-radius: 6px 10px 4px 8px / 8px 4px 10px 6px;
}
body.theme-handdrawn-pencil .excel-range-btn-cancel:hover { background: rgba(45,55,72,0.06); color: #2d3748; }
body.theme-handdrawn-pencil .excel-range-btn-confirm {
  border: 2px solid #2d3748 !important;
  border-radius: 6px 10px 4px 8px / 8px 4px 10px 6px !important;
  box-shadow: 2px 2px 0px #2d3748;
}


/* ══ 手繪蠟筆（Handdrawn Crayon）──── 繽紛手繪風 ═══════════ */
body.theme-handdrawn-crayon .excel-range-modal {
  background: var(--layer-3, #FFFDF0);
  border: 2px solid #333;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #333;
}
body.theme-handdrawn-crayon .excel-range-header {
  background: transparent;
  border-bottom: 2px solid #333;
}
body.theme-handdrawn-crayon .excel-range-header-icon,
body.theme-handdrawn-crayon .excel-range-title { color: #333; }
body.theme-handdrawn-crayon .excel-range-close { color: rgba(51,51,51,0.50); }
body.theme-handdrawn-crayon .excel-range-close:hover { color: #333; background: rgba(51,51,51,0.08); }
body.theme-handdrawn-crayon .excel-range-hint {
  color: rgba(51,51,51,0.60);
  background: rgba(51,51,51,0.04);
  border: 1px dashed rgba(51,51,51,0.30);
}
body.theme-handdrawn-crayon .excel-range-label { color: rgba(51,51,51,0.60); }
body.theme-handdrawn-crayon .excel-range-select {
  background: rgba(51,51,51,0.04);
  color: #333;
  border: 2px solid #333;
  border-radius: 8px 12px 6px 10px / 6px 10px 12px 8px;
}
body.theme-handdrawn-crayon .excel-range-select:focus { border-color: #333; outline: none; }
body.theme-handdrawn-crayon .excel-range-preview { color: var(--cb-ink, #1A1A1A); }
body.theme-handdrawn-crayon .excel-range-btn-cancel {
  border: 2px solid #333;
  color: rgba(51,51,51,0.65);
  border-radius: 8px 12px 6px 10px / 6px 10px 12px 8px;
}
body.theme-handdrawn-crayon .excel-range-btn-cancel:hover { background: rgba(51,51,51,0.06); color: #333; }
body.theme-handdrawn-crayon .excel-range-btn-confirm {
  border: 2px solid #333 !important;
  border-radius: 8px 12px 6px 10px / 6px 10px 12px 8px !important;
  box-shadow: 3px 3px 0px #333;
}

/* Excel 匯入視窗預覽模式 UI 優化 */
#import-modal-box.preview-mode {
  max-width: 1000px !important;
  height: 95vh !important;
}

#import-modal-box.preview-mode #import-actions-bar {
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 20px !important; /* 壓縮內距使持有人與分頁貼齊上緣 */
  gap: 12px !important;
}

#import-modal-box.preview-mode #import-owner-label {
  width: auto !important;
}

/* 黃色切換分頁貼齊頂部同行 (原紅框) */
#import-modal-box.preview-mode #import-actions-bar #import-tabs {
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#import-modal-box.preview-mode .import-tab {
  padding: 4px 10px !important;
  font-size: 12px !important;
}

#import-modal-box.preview-mode .import-tab svg {
  width: 12px !important;
  height: 12px !important;
  margin-right: 2px !important;
}

#import-modal-box.preview-mode #import-tab-hint {
  padding: 2px 20px !important;
  font-size: 11px !important;
}

/* 預覽模式下底部 Footer 佈局優化 */
#import-modal-box.preview-mode .modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 20px !important;
  gap: 12px !important;
}

/* 移至底部的按鈕容器 (原黃框) */
#import-modal-box.preview-mode #import-buttons-wrap {
  width: auto !important;
  margin: 0 auto !important; /* 居中對齊 */
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
}

#import-modal-box.preview-mode #import-buttons-wrap button {
  height: 32px !important;
  font-size: 13px !important;
  padding: 0 12px !important;
  width: 140px !important;
}




/* ══════════════════════════════════════════════════════════════════
   App Loading Screen  (全螢幕固定遮罩版)
   - position:fixed 蓋住整個 viewport，包含 sidebar 與 AI 按鈕
   - 主題色透過 <html> 或 <body> 上的 theme class 驅動（早期注入）
   ══════════════════════════════════════════════════════════════════ */

#app-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 預設背景（Default / Morand 系列） */
  background: var(--bg-main, #e6fcf5);
  transition: opacity 0.38s ease, transform 0.38s ease;
}

#app-loading-screen.app-loading-done {
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
}

/* 置中內容區塊 */
.app-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
}

/* Logo */
.app-loading-logo {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--gray-700, #374151);
  user-select: none;
}
.app-loading-logo span {
  color: var(--teal, #14b8a6);
}

/* 進度條外框 */
.app-loading-bar-wrap {
  width: min(340px, 70vw);
  height: 6px;
  background: var(--gray-200, #e5e7eb);
  border-radius: 99px;
  overflow: hidden;
}

/* 進度條本體 */
.app-loading-bar {
  height: 100%;
  width: 0%;
  background: var(--teal, #14b8a6);
  border-radius: 99px;
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 步驟說明 */
.app-loading-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500, #6b7280);
  letter-spacing: 0.01em;
  min-height: 20px;
}

/* 連線模式提示 */
.app-loading-mode {
  font-size: 12px;
  color: var(--gray-400, #9ca3af);
  min-height: 18px;
}

/* ── 早期注入階段：class 掛在 <html> 上，需額外選到 ── */
html.theme-stardust #app-loading-screen,
body.theme-stardust  #app-loading-screen {
  background: #0f172a;
}
html.theme-stardust  #app-loading-screen .app-loading-logo,
body.theme-stardust  #app-loading-screen .app-loading-logo { color: #e2e8f0; }
html.theme-stardust  #app-loading-screen .app-loading-logo span,
body.theme-stardust  #app-loading-screen .app-loading-logo span { color: #818cf8; }
html.theme-stardust  #app-loading-screen .app-loading-bar,
body.theme-stardust  #app-loading-screen .app-loading-bar {
  background: linear-gradient(90deg, #6366f1, #818cf8);
}
html.theme-stardust  #app-loading-screen .app-loading-bar-wrap,
body.theme-stardust  #app-loading-screen .app-loading-bar-wrap { background: #1e293b; }
html.theme-stardust  #app-loading-screen .app-loading-label,
body.theme-stardust  #app-loading-screen .app-loading-label { color: #94a3b8; }
html.theme-stardust  #app-loading-screen .app-loading-mode,
body.theme-stardust  #app-loading-screen .app-loading-mode  { color: #64748b; }

/* ── Glass：半透明毛玻璃背景（無背景圖時 fallback 白色系） ── */
html.theme-glass #app-loading-screen,
body.theme-glass  #app-loading-screen {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
html.theme-glass  #app-loading-screen .app-loading-bar-wrap,
body.theme-glass  #app-loading-screen .app-loading-bar-wrap {
  background: rgba(255,255,255,0.2);
}
html.theme-glass  #app-loading-screen .app-loading-label,
body.theme-glass  #app-loading-screen .app-loading-label { color: rgba(15,23,42,0.6); }
html.theme-glass  #app-loading-screen .app-loading-mode,
body.theme-glass  #app-loading-screen .app-loading-mode  { color: rgba(15,23,42,0.45); }

/* ── Handdrawn Pencil ── */
html.theme-handdrawn-pencil #app-loading-screen,
body.theme-handdrawn-pencil  #app-loading-screen {
  background: #FAF9F5;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}
html.theme-handdrawn-pencil  #app-loading-screen .app-loading-logo,
body.theme-handdrawn-pencil  #app-loading-screen .app-loading-logo { color: #2d3748; }
html.theme-handdrawn-pencil  #app-loading-screen .app-loading-logo span,
body.theme-handdrawn-pencil  #app-loading-screen .app-loading-logo span {
  color: #2d3748;
  text-decoration: underline wavy #2d3748 2px;
}
html.theme-handdrawn-pencil  #app-loading-screen .app-loading-bar-wrap,
body.theme-handdrawn-pencil  #app-loading-screen .app-loading-bar-wrap {
  border: 2px solid #2d3748;
  border-radius: 4px;
  background: #ede8df;
  height: 10px;
}
html.theme-handdrawn-pencil  #app-loading-screen .app-loading-bar,
body.theme-handdrawn-pencil  #app-loading-screen .app-loading-bar {
  background: #2d3748;
  border-radius: 0;
}
html.theme-handdrawn-pencil  #app-loading-screen .app-loading-label,
body.theme-handdrawn-pencil  #app-loading-screen .app-loading-label { color: #4a5568; }
html.theme-handdrawn-pencil  #app-loading-screen .app-loading-mode,
body.theme-handdrawn-pencil  #app-loading-screen .app-loading-mode  { color: #718096; }

/* ── Handdrawn Crayon ── */
html.theme-handdrawn-crayon #app-loading-screen,
body.theme-handdrawn-crayon  #app-loading-screen {
  background: #fffbeb;
}
html.theme-handdrawn-crayon  #app-loading-screen .app-loading-logo,
body.theme-handdrawn-crayon  #app-loading-screen .app-loading-logo { color: #92400e; }
html.theme-handdrawn-crayon  #app-loading-screen .app-loading-logo span,
body.theme-handdrawn-crayon  #app-loading-screen .app-loading-logo span { color: #ef4444; }
html.theme-handdrawn-crayon  #app-loading-screen .app-loading-bar-wrap,
body.theme-handdrawn-crayon  #app-loading-screen .app-loading-bar-wrap {
  border: 2.5px solid #b45309;
  border-radius: 4px;
  background: #fef3c7;
  height: 10px;
}
html.theme-handdrawn-crayon  #app-loading-screen .app-loading-bar,
body.theme-handdrawn-crayon  #app-loading-screen .app-loading-bar {
  background: linear-gradient(90deg, #f59e0b, #ef4444, #3b82f6);
  border-radius: 0;
}
html.theme-handdrawn-crayon  #app-loading-screen .app-loading-label,
body.theme-handdrawn-crayon  #app-loading-screen .app-loading-label { color: #92400e; }
html.theme-handdrawn-crayon  #app-loading-screen .app-loading-mode,
body.theme-handdrawn-crayon  #app-loading-screen .app-loading-mode  { color: #b45309; }

/* ── 資產負債表 loading 狀態 ── */
.bs-loading [data-bal-id],
.bs-loading [data-bal-name],
.bs-loading [id^="bs-accordion-subtotal-"],
.bs-loading #bs-assets-total,
.bs-loading #bs-liabilities-total,
.bs-loading #bs-credit-total,
.bs-loading #yr-total-value {
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
}

.bs-loading [data-bal-id]::after,
.bs-loading [data-bal-name]::after,
.bs-loading [id^="bs-accordion-subtotal-"]::after,
.bs-loading #bs-assets-total::after,
.bs-loading #bs-liabilities-total::after,
.bs-loading #bs-credit-total::after,
.bs-loading #yr-total-value::after {
  content: "計算中...";
  font-size: 14px;
  color: var(--text-muted, #888) !important;
  font-weight: 500;
  letter-spacing: 1px;
}

/* 🆕 登出向量按鈕樣式與自適應配色 */
.btn-logout-icon {
  border-color: var(--text-secondary, rgba(255,255,255,0.4)) !important;
  color: var(--text-secondary, rgba(255,255,255,0.6)) !important;
}
.btn-logout-icon:hover {
  border-color: var(--rose, #ef4444) !important;
  color: var(--rose, #ef4444) !important;
  background: var(--rose-light, rgba(239, 68, 68, 0.1)) !important;
  opacity: 1 !important;
  transform: scale(1.08);
}