/* ============================================================
   GHZ THEME VARIABLES — extracted từ theme-engine.js để INLINE
   ngay trong <head> của index.html, đảm bảo CSS variables có
   sẵn TRƯỚC khi theme-engine.js load. Fix lỗi: sau logout/reload,
   theme mất do theme-engine.js chạy chậm → variables chưa có →
   UI fallback 'classic'.

   File này chỉ chứa CSS variables + derived tokens + brand colors.
   Phần styling (card glass, button glow, v.v.) vẫn load từ
   theme-engine.js injectCss() — không trùng lặp, không xung đột.

   Đồng bộ 100% với theme-engine.js. Khi sửa variables ở đây,
   phải sửa tương ứng ở theme-engine.js.
   ============================================================ */

/* ===== CSS variables cho từng theme (apply ở :root hoặc html[data-theme]) ===== */
html[data-theme="mint-fresh"] {
    --ghz-bg: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(168,230,207,0.48) 100%);
    --ghz-card-border: rgba(168,230,207,0.6);
    --ghz-text-primary: #1a202c;
    --ghz-text-secondary: #2d3748;
    --ghz-text-muted: #374151;
    --ghz-grad-1: #a8e6cf;
    --ghz-grad-2: #dcedc1;
    --ghz-button-bg: #38b2ac;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(168,230,207,0.6);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(168,230,207,0.45));
    --ghz-tabbar-text: #2d3748;
    --ghz-tabbar-active: #38b2ac;
    --ghz-scrollbar-thumb: rgba(168,230,207,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #1a202c;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(168,230,207,0.5) 0%, rgba(220,237,193,0.5) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}
html[data-theme="peach-cream"] {
    --ghz-bg: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(252,182,159,0.48) 100%);
    --ghz-card-border: rgba(252,182,159,0.6);
    --ghz-text-primary: #2d2418;
    --ghz-text-secondary: #4a3f33;
    --ghz-text-muted: #4a3f33;
    --ghz-grad-1: #ffecd2;
    --ghz-grad-2: #fcb69f;
    --ghz-button-bg: #ed8936;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(252,182,159,0.6);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(252,182,159,0.45));
    --ghz-tabbar-text: #2d2418;
    --ghz-tabbar-active: #ed8936;
    --ghz-scrollbar-thumb: rgba(252,182,159,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #2d2418;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(255,236,210,0.55) 0%, rgba(255,255,255,0.55) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}
html[data-theme="lavender-mist"] {
    --ghz-bg: linear-gradient(135deg, #c2e9fb 0%, #d4baf7 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(212,186,247,0.48) 100%);
    --ghz-card-border: rgba(212,186,247,0.6);
    --ghz-text-primary: #1a202c;
    --ghz-text-secondary: #2d3748;
    --ghz-text-muted: #374151;
    --ghz-grad-1: #c2e9fb;
    --ghz-grad-2: #d4baf7;
    --ghz-button-bg: #805ad5;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(212,186,247,0.6);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(212,186,247,0.45));
    --ghz-tabbar-text: #2d3748;
    --ghz-tabbar-active: #805ad5;
    --ghz-scrollbar-thumb: rgba(212,186,247,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #1a202c;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(212,186,247,0.5) 0%, rgba(194,233,251,0.5) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}
html[data-theme="sky-blue"] {
    --ghz-bg: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(102,166,255,0.48) 100%);
    --ghz-card-border: rgba(102,166,255,0.6);
    --ghz-text-primary: #1a202c;
    --ghz-text-secondary: #2d3748;
    --ghz-text-muted: #374151;
    --ghz-grad-1: #89f7fe;
    --ghz-grad-2: #66a6ff;
    --ghz-button-bg: #3182ce;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(102,166,255,0.6);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(102,166,255,0.45));
    --ghz-tabbar-text: #2d3748;
    --ghz-tabbar-active: #3182ce;
    --ghz-scrollbar-thumb: rgba(102,166,255,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #1a202c;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(137,247,254,0.5) 0%, rgba(102,166,255,0.45) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}
html[data-theme="sunset"] {
    --ghz-bg: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(253,160,133,0.48) 100%);
    --ghz-card-border: rgba(253,160,133,0.6);
    --ghz-text-primary: #2d2418;
    --ghz-text-secondary: #4a3f33;
    --ghz-text-muted: #4a3f33;
    --ghz-grad-1: #f6d365;
    --ghz-grad-2: #fda085;
    --ghz-button-bg: #dd6b20;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(253,160,133,0.6);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(253,160,133,0.45));
    --ghz-tabbar-text: #2d2418;
    --ghz-tabbar-active: #dd6b20;
    --ghz-scrollbar-thumb: rgba(253,160,133,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #2d2418;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(246,211,101,0.55) 0%, rgba(253,160,133,0.5) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}
html[data-theme="midnight"] {
    --ghz-bg: linear-gradient(135deg, #0f2027 0%, #2c5364 100%);
    --ghz-card-bg: rgba(15,32,39,0.55);
    --ghz-card-border: rgba(255,255,255,0.1);
    --ghz-text-primary: #f7fafc;
    --ghz-text-secondary: #e2e8f0;
    --ghz-text-muted: #a0aec0;
    --ghz-grad-1: #0f2027;
    --ghz-grad-2: #2c5364;
    --ghz-button-bg: #2c5364;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(15,32,39,0.65);
    --ghz-input-border: rgba(255,255,255,0.15);
    --ghz-tabbar-bg: rgba(15,32,39,0.92);
    --ghz-tabbar-text: #cbd5e0;
    --ghz-tabbar-active: #4fd1c5;
    --ghz-scrollbar-thumb: #2c5364;
    --ghz-scrollbar-track: #0f2027;
    --ghz-text-on-grad: #ffffff;
    --ghz-success: #34d399;
    --ghz-success-bg: rgba(52,211,153,0.18);
    --ghz-danger: #f87171;
    --ghz-danger-bg: rgba(248,113,113,0.18);
    --ghz-warning: #fbbf24;
    --ghz-warning-bg: rgba(251,191,36,0.18);
    --ghz-info: #60a5fa;
    --ghz-info-bg: rgba(96,165,250,0.18);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(20,25,40,0.45) 0%, rgba(30,35,55,0.35) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.18);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.25) inset,
        0 8px 32px rgba(0,0,0,0.35),
        0 2px 8px rgba(0,0,0,0.2);
}
html[data-theme="deep-space"] {
    --ghz-bg: linear-gradient(135deg, #000000 0%, #434343 100%);
    --ghz-card-bg: rgba(20,20,20,0.6);
    --ghz-card-border: rgba(255,255,255,0.08);
    --ghz-text-primary: #f7fafc;
    --ghz-text-secondary: #e2e8f0;
    --ghz-text-muted: #a0aec0;
    --ghz-grad-1: #000000;
    --ghz-grad-2: #434343;
    --ghz-button-bg: #4a5568;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(30,30,30,0.7);
    --ghz-input-border: rgba(255,255,255,0.1);
    --ghz-tabbar-bg: rgba(10,10,10,0.92);
    --ghz-tabbar-text: #cbd5e0;
    --ghz-tabbar-active: #a0aec0;
    --ghz-scrollbar-thumb: #4a5568;
    --ghz-scrollbar-track: #1a1a1a;
    --ghz-text-on-grad: #ffffff;
    --ghz-success: #34d399;
    --ghz-success-bg: rgba(52,211,153,0.18);
    --ghz-danger: #f87171;
    --ghz-danger-bg: rgba(248,113,113,0.18);
    --ghz-warning: #fbbf24;
    --ghz-warning-bg: rgba(251,191,36,0.18);
    --ghz-info: #60a5fa;
    --ghz-info-bg: rgba(96,165,250,0.18);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(30,30,30,0.55) 0%, rgba(50,50,50,0.4) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.12);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.18) inset,
        0 8px 32px rgba(0,0,0,0.45),
        0 2px 8px rgba(0,0,0,0.25);
}
html[data-theme="pure-dark"] {
    --ghz-bg: linear-gradient(135deg, #232526 0%, #414345 100%);
    --ghz-card-bg: rgba(40,42,44,0.55);
    --ghz-card-border: rgba(255,255,255,0.08);
    --ghz-text-primary: #f7fafc;
    --ghz-text-secondary: #e2e8f0;
    --ghz-text-muted: #a0aec0;
    --ghz-grad-1: #232526;
    --ghz-grad-2: #414345;
    --ghz-button-bg: #4a5568;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(40,42,44,0.7);
    --ghz-input-border: rgba(255,255,255,0.1);
    --ghz-tabbar-bg: rgba(35,37,38,0.92);
    --ghz-tabbar-text: #cbd5e0;
    --ghz-tabbar-active: #a0aec0;
    --ghz-scrollbar-thumb: #4a5568;
    --ghz-scrollbar-track: #232526;
    --ghz-text-on-grad: #ffffff;
    --ghz-success: #34d399;
    --ghz-success-bg: rgba(52,211,153,0.18);
    --ghz-danger: #f87171;
    --ghz-danger-bg: rgba(248,113,113,0.18);
    --ghz-warning: #fbbf24;
    --ghz-warning-bg: rgba(251,191,36,0.18);
    --ghz-info: #60a5fa;
    --ghz-info-bg: rgba(96,165,250,0.18);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(45,55,65,0.5) 0%, rgba(60,70,80,0.4) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.15);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.2) inset,
        0 8px 32px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.22);
}
html[data-theme="charcoal"] {
    --ghz-bg: linear-gradient(135deg, #37474f 0%, #263238 100%);
    --ghz-card-bg: rgba(55,71,79,0.45);
    --ghz-card-border: rgba(255,255,255,0.1);
    --ghz-text-primary: #f7fafc;
    --ghz-text-secondary: #e2e8f0;
    --ghz-text-muted: #a0aec0;
    --ghz-grad-1: #37474f;
    --ghz-grad-2: #263238;
    --ghz-button-bg: #607d8b;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(55,71,79,0.65);
    --ghz-input-border: rgba(255,255,255,0.12);
    --ghz-tabbar-bg: rgba(38,50,56,0.92);
    --ghz-tabbar-text: #b0bec5;
    --ghz-tabbar-active: #90a4ae;
    --ghz-scrollbar-thumb: #607d8b;
    --ghz-scrollbar-track: #263238;
    --ghz-text-on-grad: #ffffff;
    --ghz-success: #34d399;
    --ghz-success-bg: rgba(52,211,153,0.18);
    --ghz-danger: #f87171;
    --ghz-danger-bg: rgba(248,113,113,0.18);
    --ghz-warning: #fbbf24;
    --ghz-warning-bg: rgba(251,191,36,0.18);
    --ghz-info: #60a5fa;
    --ghz-info-bg: rgba(96,165,250,0.18);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(45,55,65,0.55) 0%, rgba(60,70,80,0.45) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.15);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.2) inset,
        0 8px 32px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.22);
}
html[data-theme="fire"] {
    --ghz-bg: linear-gradient(135deg, #fceabb 0%, #f8b500 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(248,181,0,0.48) 100%);
    --ghz-card-border: rgba(248,181,0,0.6);
    --ghz-text-primary: #2d2418;
    --ghz-text-secondary: #4a3f33;
    --ghz-text-muted: #4a3f33;
    --ghz-grad-1: #fceabb;
    --ghz-grad-2: #f8b500;
    --ghz-button-bg: #d69e2e;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(248,181,0,0.6);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(248,181,0,0.45));
    --ghz-tabbar-text: #2d2418;
    --ghz-tabbar-active: #d69e2e;
    --ghz-scrollbar-thumb: rgba(248,181,0,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #2d2418;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(252,234,187,0.55) 0%, rgba(248,181,0,0.45) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}
html[data-theme="purple-haze"] {
    --ghz-bg: linear-gradient(135deg, #2e3192 0%, #1bffff 100%);
    --ghz-card-bg: rgba(46,49,146,0.4);
    --ghz-card-border: rgba(255,255,255,0.18);
    --ghz-text-primary: #ffffff;
    --ghz-text-secondary: #e0e7ff;
    --ghz-text-muted: #c7d2fe;
    --ghz-grad-1: #6d4ec6;
    --ghz-grad-2: #4a3a8a;
    --ghz-button-bg: #1bffff;
    --ghz-button-text: #1a202c;
    --ghz-input-bg: rgba(46,49,146,0.5);
    --ghz-input-border: rgba(255,255,255,0.25);
    --ghz-tabbar-bg: rgba(46,49,146,0.85);
    --ghz-tabbar-text: #c7d2fe;
    --ghz-tabbar-active: #b794f4;
    --ghz-scrollbar-thumb: #6d4ec6;
    --ghz-scrollbar-track: #2e3192;
    --ghz-text-on-grad: #ffffff;
    --ghz-success: #34d399;
    --ghz-success-bg: rgba(52,211,153,0.18);
    --ghz-danger: #fca5a5;
    --ghz-danger-bg: rgba(252,165,165,0.2);
    --ghz-warning: #fbbf24;
    --ghz-warning-bg: rgba(251,191,36,0.2);
    --ghz-info: #c4b5fd;
    --ghz-info-bg: rgba(196,181,253,0.22);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(46,49,146,0.45) 0%, rgba(109,78,198,0.35) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.20);
    --ghz-card-glass-blur: blur(28px) saturate(1.7);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.22) inset,
        0 -1px 0 0 rgba(0,0,0,0.18) inset,
        0 8px 32px rgba(0,0,0,0.40),
        0 2px 8px rgba(0,0,0,0.22);
}
html[data-theme="pink-bloom"] {
    --ghz-bg: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(255,154,158,0.48) 100%);
    --ghz-card-border: rgba(255,154,158,0.6);
    --ghz-text-primary: #2d1f1f;
    --ghz-text-secondary: #4a3f3f;
    --ghz-text-muted: #4a3f3f;
    --ghz-grad-1: #ff9a9e;
    --ghz-grad-2: #fad0c4;
    --ghz-button-bg: #ed64a6;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(255,154,158,0.6);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(255,154,158,0.45));
    --ghz-tabbar-text: #2d1f1f;
    --ghz-tabbar-active: #ed64a6;
    --ghz-scrollbar-thumb: rgba(255,154,158,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #2d1f1f;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(255,154,158,0.55) 0%, rgba(250,208,196,0.5) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}

/* ============================================================
   6 THEME PASTEL MỚI (thêm vào production 2026-09-27)
   - cherry-blossom, coffee-cream, forest-pastel, rose-pastel,
     aurora-pastel, sunset-pastel
   - Không đụng 13 theme cũ, chỉ chèn thêm vào cuối nhóm theme.
   ============================================================ */
html[data-theme="cherry-blossom"] {
    --ghz-bg: linear-gradient(135deg, #ffe4ec 0%, #f9a8d4 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(249,168,212,0.48) 100%);
    --ghz-card-border: rgba(249,168,212,0.6);
    --ghz-text-primary: #2d1f1f;
    --ghz-text-secondary: #4a3f3f;
    --ghz-text-muted: #4a3f3f;
    --ghz-grad-1: #ffe4ec;
    --ghz-grad-2: #f9a8d4;
    --ghz-button-bg: #ec4899;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(249,168,212,0.6);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(249,168,212,0.45));
    --ghz-tabbar-text: #2d1f1f;
    --ghz-tabbar-active: #ec4899;
    --ghz-scrollbar-thumb: rgba(249,168,212,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #2d1f1f;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(255,228,236,0.55) 0%, rgba(249,168,212,0.5) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}
html[data-theme="coffee-cream"] {
    --ghz-bg: linear-gradient(135deg, #f5e6d3 0%, #92400e 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,247,237,0.88) 0%, rgba(146,64,14,0.45) 100%);
    --ghz-card-border: rgba(146,64,14,0.5);
    --ghz-text-primary: #2d2418;
    --ghz-text-secondary: #4a3f33;
    --ghz-text-muted: #4a3f33;
    --ghz-grad-1: #f5e6d3;
    --ghz-grad-2: #92400e;
    --ghz-button-bg: #92400e;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,247,237,0.7);
    --ghz-input-border: rgba(146,64,14,0.5);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,247,237,0.82), rgba(146,64,14,0.40));
    --ghz-tabbar-text: #2d2418;
    --ghz-tabbar-active: #92400e;
    --ghz-scrollbar-thumb: rgba(146,64,14,0.55);
    --ghz-scrollbar-track: rgba(255,247,237,0.4);
    --ghz-text-on-grad: #2d2418;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(245,230,211,0.55) 0%, rgba(146,64,14,0.45) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.12),
        0 2px 8px rgba(0,0,0,0.06);
}
html[data-theme="forest-pastel"] {
    --ghz-bg: linear-gradient(135deg, #86efac 0%, #15803d 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(21,128,61,0.40) 100%);
    --ghz-card-border: rgba(21,128,61,0.5);
    --ghz-text-primary: #052e16;
    --ghz-text-secondary: #14532d;
    --ghz-text-muted: #166534;
    --ghz-grad-1: #86efac;
    --ghz-grad-2: #15803d;
    --ghz-button-bg: #15803d;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(21,128,61,0.5);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(21,128,61,0.40));
    --ghz-tabbar-text: #052e16;
    --ghz-tabbar-active: #15803d;
    --ghz-scrollbar-thumb: rgba(21,128,61,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #052e16;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(134,239,172,0.55) 0%, rgba(21,128,61,0.45) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.12),
        0 2px 8px rgba(0,0,0,0.06);
}
html[data-theme="rose-pastel"] {
    --ghz-bg: linear-gradient(135deg, #fbcfe8 0%, #ec4899 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(236,72,153,0.45) 100%);
    --ghz-card-border: rgba(236,72,153,0.5);
    --ghz-text-primary: #2d1f1f;
    --ghz-text-secondary: #4a3f3f;
    --ghz-text-muted: #4a3f3f;
    --ghz-grad-1: #fbcfe8;
    --ghz-grad-2: #ec4899;
    --ghz-button-bg: #ec4899;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(236,72,153,0.5);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(236,72,153,0.40));
    --ghz-tabbar-text: #2d1f1f;
    --ghz-tabbar-active: #ec4899;
    --ghz-scrollbar-thumb: rgba(236,72,153,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #2d1f1f;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(251,207,232,0.55) 0%, rgba(236,72,153,0.45) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}
html[data-theme="aurora-pastel"] {
    --ghz-bg: linear-gradient(135deg, #a5f3fc 0%, #c4b5fd 50%, #fbcfe8 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(196,181,253,0.40) 100%);
    --ghz-card-border: rgba(196,181,253,0.55);
    --ghz-text-primary: #1e1b4b;
    --ghz-text-secondary: #312e81;
    --ghz-text-muted: #4c1d95;
    --ghz-grad-1: #a5f3fc;
    --ghz-grad-2: #c4b5fd;
    --ghz-button-bg: #7c3aed;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.70);
    --ghz-input-border: rgba(196,181,253,0.55);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(196,181,253,0.45));
    --ghz-tabbar-text: #1e1b4b;
    --ghz-tabbar-active: #7c3aed;
    --ghz-scrollbar-thumb: rgba(196,181,253,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #1e1b4b;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(165,243,252,0.55) 0%, rgba(196,181,253,0.50) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.12),
        0 2px 8px rgba(0,0,0,0.06);
}
html[data-theme="sunset-pastel"] {
    --ghz-bg: linear-gradient(135deg, #fed7aa 0%, #f97316 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(249,115,22,0.45) 100%);
    --ghz-card-border: rgba(249,115,22,0.55);
    --ghz-text-primary: #2d2418;
    --ghz-text-secondary: #4a3f33;
    --ghz-text-muted: #4a3f33;
    --ghz-grad-1: #fed7aa;
    --ghz-grad-2: #f97316;
    --ghz-button-bg: #f97316;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(249,115,22,0.55);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(249,115,22,0.40));
    --ghz-tabbar-text: #2d2418;
    --ghz-tabbar-active: #f97316;
    --ghz-scrollbar-thumb: rgba(249,115,22,0.55);
    --ghz-scrollbar-track: rgba(255,255,255,0.4);
    --ghz-text-on-grad: #2d2418;
    --ghz-success: #047857;
    --ghz-success-bg: rgba(4,120,87,0.14);
    --ghz-danger: #b91c1c;
    --ghz-danger-bg: rgba(185,28,28,0.14);
    --ghz-warning: #b45309;
    --ghz-warning-bg: rgba(180,83,9,0.14);
    --ghz-info: #1e40af;
    --ghz-info-bg: rgba(30,64,175,0.12);
    --ghz-card-glass-bg: linear-gradient(135deg, rgba(254,215,170,0.55) 0%, rgba(249,115,22,0.45) 100%);
    --ghz-card-glass-border: rgba(255,255,255,0.6);
    --ghz-card-glass-blur: blur(28px) saturate(1.8);
    --ghz-card-glass-shadow:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 -1px 0 0 rgba(0,0,0,0.04) inset,
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(0,0,0,0.05);
}

/* ===== PASTEL THEMES: define tokens before the theme engine runs ===== */
html[data-theme="cherry-blossom"] {
    --ghz-bg: linear-gradient(135deg, #ffe4ec 0%, #f9a8d4 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(249,168,212,0.48) 100%);
    --ghz-card-border: rgba(249,168,212,0.6);
    --ghz-text-primary: #2d1f1f;
    --ghz-text-secondary: #4a3f3f;
    --ghz-text-muted: #4a3f3f;
    --ghz-grad-1: #ffe4ec;
    --ghz-grad-2: #f9a8d4;
    --ghz-button-bg: #ec4899;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(249,168,212,0.6);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(249,168,212,0.45));
    --ghz-tabbar-text: #2d1f1f;
    --ghz-tabbar-active: #ec4899;
    --ghz-text-on-grad: #2d1f1f;
    --ghz-success: #047857;
    --ghz-danger: #b91c1c;
    --ghz-warning: #b45309;
    --ghz-info: #1e40af;
}
html[data-theme="coffee-cream"] {
    --ghz-bg: linear-gradient(135deg, #f5e6d3 0%, #92400e 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,247,237,0.88) 0%, rgba(146,64,14,0.45) 100%);
    --ghz-card-border: rgba(146,64,14,0.5);
    --ghz-text-primary: #2d2418;
    --ghz-text-secondary: #4a3f33;
    --ghz-text-muted: #4a3f33;
    --ghz-grad-1: #f5e6d3;
    --ghz-grad-2: #92400e;
    --ghz-button-bg: #92400e;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,247,237,0.7);
    --ghz-input-border: rgba(146,64,14,0.5);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,247,237,0.82), rgba(146,64,14,0.40));
    --ghz-tabbar-text: #2d2418;
    --ghz-tabbar-active: #92400e;
    --ghz-text-on-grad: #2d2418;
    --ghz-success: #047857;
    --ghz-danger: #b91c1c;
    --ghz-warning: #b45309;
    --ghz-info: #1e40af;
}
html[data-theme="forest-pastel"] {
    --ghz-bg: linear-gradient(135deg, #86efac 0%, #15803d 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(21,128,61,0.40) 100%);
    --ghz-card-border: rgba(21,128,61,0.5);
    --ghz-text-primary: #052e16;
    --ghz-text-secondary: #14532d;
    --ghz-text-muted: #166534;
    --ghz-grad-1: #86efac;
    --ghz-grad-2: #15803d;
    --ghz-button-bg: #15803d;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(21,128,61,0.5);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(21,128,61,0.40));
    --ghz-tabbar-text: #052e16;
    --ghz-tabbar-active: #15803d;
    --ghz-text-on-grad: #052e16;
    --ghz-success: #047857;
    --ghz-danger: #b91c1c;
    --ghz-warning: #b45309;
    --ghz-info: #1e40af;
}
html[data-theme="rose-pastel"] {
    --ghz-bg: linear-gradient(135deg, #fbcfe8 0%, #ec4899 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(236,72,153,0.45) 100%);
    --ghz-card-border: rgba(236,72,153,0.5);
    --ghz-text-primary: #2d1f1f;
    --ghz-text-secondary: #4a3f3f;
    --ghz-text-muted: #4a3f3f;
    --ghz-grad-1: #fbcfe8;
    --ghz-grad-2: #ec4899;
    --ghz-button-bg: #ec4899;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(236,72,153,0.5);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(236,72,153,0.40));
    --ghz-tabbar-text: #2d1f1f;
    --ghz-tabbar-active: #ec4899;
    --ghz-text-on-grad: #2d1f1f;
    --ghz-success: #047857;
    --ghz-danger: #b91c1c;
    --ghz-warning: #b45309;
    --ghz-info: #1e40af;
}
html[data-theme="aurora-pastel"] {
    --ghz-bg: linear-gradient(135deg, #a5f3fc 0%, #c4b5fd 50%, #fbcfe8 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(196,181,253,0.40) 100%);
    --ghz-card-border: rgba(196,181,253,0.55);
    --ghz-text-primary: #1e1b4b;
    --ghz-text-secondary: #312e81;
    --ghz-text-muted: #4c1d95;
    --ghz-grad-1: #a5f3fc;
    --ghz-grad-2: #c4b5fd;
    --ghz-button-bg: #7c3aed;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.70);
    --ghz-input-border: rgba(196,181,253,0.55);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(196,181,253,0.45));
    --ghz-tabbar-text: #1e1b4b;
    --ghz-tabbar-active: #7c3aed;
    --ghz-text-on-grad: #1e1b4b;
    --ghz-success: #047857;
    --ghz-danger: #b91c1c;
    --ghz-warning: #b45309;
    --ghz-info: #1e40af;
}
html[data-theme="sunset-pastel"] {
    --ghz-bg: linear-gradient(135deg, #fed7aa 0%, #f97316 100%);
    --ghz-card-bg: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(249,115,22,0.45) 100%);
    --ghz-card-border: rgba(249,115,22,0.55);
    --ghz-text-primary: #2d2418;
    --ghz-text-secondary: #4a3f33;
    --ghz-text-muted: #4a3f33;
    --ghz-grad-1: #fed7aa;
    --ghz-grad-2: #f97316;
    --ghz-button-bg: #f97316;
    --ghz-button-text: #ffffff;
    --ghz-input-bg: rgba(255,255,255,0.7);
    --ghz-input-border: rgba(249,115,22,0.55);
    --ghz-tabbar-bg: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(249,115,22,0.40));
    --ghz-tabbar-text: #2d2418;
    --ghz-tabbar-active: #f97316;
    --ghz-text-on-grad: #2d2418;
    --ghz-success: #047857;
    --ghz-danger: #b91c1c;
    --ghz-warning: #b45309;
    --ghz-info: #1e40af;
}

/* ===== DERIVED TOKENS CHO GLASS BUTTONS ===== */
:root, html[data-theme] {
    --ghz-btn-primary-bg: color-mix(in srgb, var(--ghz-grad-1, #00c37a) 95%, transparent);
    --ghz-btn-primary-bg-hover: color-mix(in srgb, var(--ghz-grad-1, #00c37a) 100%, white 8%);
    --ghz-btn-primary-border: color-mix(in srgb, white 35%, transparent);
    --ghz-btn-primary-border-hover: color-mix(in srgb, white 55%, transparent);
    --ghz-btn-primary-shadow:
        0 4px 14px color-mix(in srgb, var(--ghz-grad-1, #00c37a) 45%, transparent),
        0 1px 2px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -1px 0 rgba(0,0,0,0.18);
    --ghz-btn-primary-shadow-hover:
        0 8px 22px color-mix(in srgb, var(--ghz-grad-1, #00c37a) 55%, transparent),
        0 2px 4px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(0,0,0,0.15);

    --ghz-btn-secondary-bg: color-mix(in srgb, white 8%, transparent);
    --ghz-btn-secondary-bg-hover: color-mix(in srgb, white 14%, transparent);
    --ghz-btn-secondary-border: color-mix(in srgb, white 20%, transparent);
    --ghz-btn-secondary-border-hover: color-mix(in srgb, white 35%, transparent);

    --ghz-btn-danger-bg: color-mix(in srgb, var(--ghz-danger, #f87171) 18%, transparent);
    --ghz-btn-danger-bg-hover: color-mix(in srgb, var(--ghz-danger, #f87171) 28%, transparent);
    --ghz-btn-danger-border: color-mix(in srgb, var(--ghz-danger, #f87171) 45%, transparent);
    --ghz-btn-danger-border-hover: color-mix(in srgb, var(--ghz-danger, #f87171) 70%, transparent);
    --ghz-btn-danger-text: color-mix(in srgb, var(--ghz-danger, #f87171) 70%, white 30%);

    --ghz-btn-warning-bg: color-mix(in srgb, var(--ghz-warning, #fbbf24) 18%, transparent);
    --ghz-btn-warning-bg-hover: color-mix(in srgb, var(--ghz-warning, #fbbf24) 28%, transparent);
    --ghz-btn-warning-border: color-mix(in srgb, var(--ghz-warning, #fbbf24) 45%, transparent);
    --ghz-btn-warning-border-hover: color-mix(in srgb, var(--ghz-warning, #fbbf24) 70%, transparent);
    --ghz-btn-warning-text: color-mix(in srgb, var(--ghz-warning, #fbbf24) 70%, black 10%);

    --ghz-btn-icon-bg: color-mix(in srgb, white 6%, transparent);
    --ghz-btn-icon-bg-hover: color-mix(in srgb, white 12%, transparent);
    --ghz-btn-icon-border: color-mix(in srgb, white 14%, transparent);
    --ghz-btn-icon-border-hover: color-mix(in srgb, white 28%, transparent);

    --ghz-btn-icon-primary-bg: var(--ghz-brand-active-bg, rgba(0,195,122,0.18));
    --ghz-btn-icon-primary-bg-hover: color-mix(in srgb, var(--ghz-grad-1, #00c37a) 22%, transparent);
    --ghz-btn-icon-primary-border: color-mix(in srgb, var(--ghz-grad-1, #00c37a) 30%, transparent);
    --ghz-btn-icon-primary-border-hover: color-mix(in srgb, var(--ghz-grad-1, #00c37a) 55%, transparent);
    --ghz-btn-icon-primary-text: var(--ghz-grad-1, #00c37a);

    --ghz-btn-icon-secondary-bg: var(--ghz-info-bg, rgba(96,165,250,0.18));
    --ghz-btn-icon-secondary-bg-hover: color-mix(in srgb, var(--ghz-info, #60a5fa) 22%, transparent);
    --ghz-btn-icon-secondary-border: color-mix(in srgb, var(--ghz-info, #60a5fa) 30%, transparent);
    --ghz-btn-icon-secondary-border-hover: color-mix(in srgb, var(--ghz-info, #60a5fa) 55%, transparent);
    --ghz-btn-icon-secondary-text: color-mix(in srgb, var(--ghz-info, #60a5fa) 70%, white 30%);

    --ghz-btn-icon-danger-bg: var(--ghz-danger-bg, rgba(239,68,68,0.18));
    --ghz-btn-icon-danger-bg-hover: color-mix(in srgb, var(--ghz-danger, #f87171) 22%, transparent);
    --ghz-btn-icon-danger-border: color-mix(in srgb, var(--ghz-danger, #f87171) 30%, transparent);
    --ghz-btn-icon-danger-border-hover: color-mix(in srgb, var(--ghz-danger, #f87171) 55%, transparent);
    --ghz-btn-icon-danger-text: color-mix(in srgb, var(--ghz-danger, #f87171) 70%, white 30%);

    --ghz-btn-icon-warning-bg: var(--ghz-warning-bg, rgba(251,191,36,0.18));
    --ghz-btn-icon-warning-bg-hover: color-mix(in srgb, var(--ghz-warning, #fbbf24) 22%, transparent);
    --ghz-btn-icon-warning-border: color-mix(in srgb, var(--ghz-warning, #fbbf24) 30%, transparent);
    --ghz-btn-icon-warning-border-hover: color-mix(in srgb, var(--ghz-warning, #fbbf24) 55%, transparent);
    --ghz-btn-icon-warning-text: color-mix(in srgb, var(--ghz-warning, #fbbf24) 70%, black 10%);

    --ghz-glass-4-blur: blur(20px) saturate(1.4);
}

/* ===== CHIP "solid brand" — text + bg theo theme ===== */
:root, html[data-theme="classic"] {
    --ghz-text-on-brand-strong: #ffffff;
    --ghz-brand-active: #00c37a;
    --ghz-brand-active-bg: rgba(0,195,122,0.45);
    --ghz-brand-active-border: rgba(0,195,122,0.80);
    --ghz-tab-btn-glow-alpha: 45%;
    --ghz-tab-btn-glow-soft: 27%;
    --ghz-tab-btn-glow-strong: 65%;
    --ghz-tab-btn-glow-hover: 55%;
}
html[data-theme="mint-fresh"] {
    --ghz-text-on-brand-strong: #285e61;
    --ghz-brand-active: #258579;
    --ghz-brand-active-bg: rgba(56,178,172,0.32);
    --ghz-brand-active-border: rgba(56,178,172,0.60);
    --ghz-tab-btn-glow-alpha: 30%;
    --ghz-tab-btn-glow-soft: 18%;
    --ghz-tab-btn-glow-strong: 45%;
    --ghz-tab-btn-glow-hover: 42%;
}
html[data-theme="peach-cream"] {
    --ghz-text-on-brand-strong: #7c2d12;
    --ghz-brand-active: #c2410c;
    --ghz-brand-active-bg: rgba(249,115,22,0.32);
    --ghz-brand-active-border: rgba(249,115,22,0.60);
    --ghz-tab-btn-glow-alpha: 30%;
    --ghz-tab-btn-glow-soft: 18%;
    --ghz-tab-btn-glow-strong: 45%;
    --ghz-tab-btn-glow-hover: 42%;
}
html[data-theme="lavender-mist"] {
    --ghz-text-on-brand-strong: #44337a;
    --ghz-brand-active: #553c9a;
    --ghz-brand-active-bg: rgba(128,90,213,0.30);
    --ghz-brand-active-border: rgba(128,90,213,0.55);
    --ghz-tab-btn-glow-alpha: 28%;
    --ghz-tab-btn-glow-soft: 17%;
    --ghz-tab-btn-glow-strong: 42%;
    --ghz-tab-btn-glow-hover: 40%;
}
html[data-theme="sky-blue"] {
    --ghz-text-on-brand-strong: #2c5282;
    --ghz-brand-active: #2a4365;
    --ghz-brand-active-bg: rgba(49,130,206,0.30);
    --ghz-brand-active-border: rgba(49,130,206,0.55);
    --ghz-tab-btn-glow-alpha: 28%;
    --ghz-tab-btn-glow-soft: 17%;
    --ghz-tab-btn-glow-strong: 42%;
    --ghz-tab-btn-glow-hover: 40%;
}
html[data-theme="sunset"] {
    --ghz-text-on-brand-strong: #7b341e;
    --ghz-brand-active: #9c4221;
    --ghz-brand-active-bg: rgba(221,107,32,0.32);
    --ghz-brand-active-border: rgba(221,107,32,0.60);
    --ghz-tab-btn-glow-alpha: 30%;
    --ghz-tab-btn-glow-soft: 18%;
    --ghz-tab-btn-glow-strong: 45%;
    --ghz-tab-btn-glow-hover: 42%;
}
html[data-theme="midnight"] {
    --ghz-text-on-brand-strong: #4fd1c5;
    --ghz-brand-active: #267e76;
    --ghz-brand-active-bg: rgba(79,209,197,0.18);
    --ghz-brand-active-border: rgba(79,209,197,0.45);
    --ghz-tab-btn-glow-alpha: 25%;
    --ghz-tab-btn-glow-soft: 15%;
    --ghz-tab-btn-glow-strong: 38%;
    --ghz-tab-btn-glow-hover: 37%;
}
html[data-theme="deep-space"] {
    --ghz-text-on-brand-strong: #4fd1c5;
    --ghz-brand-active: #2c7a7b;
    --ghz-brand-active-bg: rgba(160,174,192,0.18);
    --ghz-brand-active-border: rgba(160,174,192,0.45);
    --ghz-tab-btn-glow-alpha: 22%;
    --ghz-tab-btn-glow-soft: 13%;
    --ghz-tab-btn-glow-strong: 33%;
    --ghz-tab-btn-glow-hover: 34%;
}
html[data-theme="pure-dark"] {
    --ghz-text-on-brand-strong: #d4d4d8;
    --ghz-brand-active: #71717a;
    --ghz-brand-active-bg: rgba(212,212,216,0.16);
    --ghz-brand-active-border: rgba(212,212,216,0.40);
    --ghz-tab-btn-glow-alpha: 22%;
    --ghz-tab-btn-glow-soft: 13%;
    --ghz-tab-btn-glow-strong: 33%;
    --ghz-tab-btn-glow-hover: 34%;
}
html[data-theme="charcoal"] {
    --ghz-text-on-brand-strong: #cfd8dc;
    --ghz-brand-active: #455a64;
    --ghz-brand-active-bg: rgba(144,164,174,0.18);
    --ghz-brand-active-border: rgba(144,164,174,0.42);
    --ghz-tab-btn-glow-alpha: 24%;
    --ghz-tab-btn-glow-soft: 14%;
    --ghz-tab-btn-glow-strong: 36%;
    --ghz-tab-btn-glow-hover: 36%;
}
html[data-theme="fire"] {
    --ghz-text-on-brand-strong: #7c2d12;
    --ghz-brand-active: #9b2c2c;
    --ghz-brand-active-bg: rgba(214,158,46,0.32);
    --ghz-brand-active-border: rgba(214,158,46,0.60);
    --ghz-tab-btn-glow-alpha: 30%;
    --ghz-tab-btn-glow-soft: 18%;
    --ghz-tab-btn-glow-strong: 45%;
    --ghz-tab-btn-glow-hover: 42%;
}
html[data-theme="purple-haze"] {
    --ghz-text-on-brand-strong: #d6bcfa;
    --ghz-brand-active: #805ad5;
    --ghz-brand-active-bg: rgba(109,78,198,0.32);
    --ghz-brand-active-border: rgba(183,148,244,0.55);
    --ghz-tab-btn-glow-alpha: 25%;
    --ghz-tab-btn-glow-soft: 15%;
    --ghz-tab-btn-glow-strong: 38%;
    --ghz-tab-btn-glow-hover: 37%;
}
html[data-theme="pink-bloom"] {
    --ghz-text-on-brand-strong: #831843;
    --ghz-brand-active: #b83280;
    --ghz-brand-active-bg: rgba(237,100,166,0.30);
    --ghz-brand-active-border: rgba(237,100,166,0.55);
    --ghz-tab-btn-glow-alpha: 28%;
    --ghz-tab-btn-glow-soft: 17%;
    --ghz-tab-btn-glow-strong: 42%;
    --ghz-tab-btn-glow-hover: 40%;
}

/* ============================================================
   THEME-AWARE BRAND COLOR — cho text/icon accent
   ============================================================ */
html[data-theme="mint-fresh"]     { --ghz-brand-color: #00c37a; --ghz-brand-hover: #2d9d8f; --ghz-brand-active: #258579; --ghz-brand-soft-06: rgba(168,230,207,0.06); --ghz-brand-soft-08: rgba(168,230,207,0.08); --ghz-brand-soft-12: rgba(168,230,207,0.12); --ghz-brand-soft-18: rgba(168,230,207,0.18); --ghz-brand-soft-25: rgba(168,230,207,0.25); --ghz-brand-soft-30: rgba(168,230,207,0.30); --ghz-brand-soft-45: rgba(168,230,207,0.45); --ghz-brand-soft-55: rgba(168,230,207,0.55); --ghz-brand-soft-70: rgba(168,230,207,0.70); --ghz-brand-glow-35: rgba(168,230,207,0.35); }
html[data-theme="peach-cream"]    { --ghz-brand-color: #f97316; --ghz-brand-hover: #ea580c; --ghz-brand-active: #c2410c; --ghz-brand-soft-06: rgba(254,215,170,0.06); --ghz-brand-soft-08: rgba(254,215,170,0.08); --ghz-brand-soft-12: rgba(254,215,170,0.12); --ghz-brand-soft-18: rgba(254,215,170,0.18); --ghz-brand-soft-25: rgba(254,215,170,0.25); --ghz-brand-soft-30: rgba(254,215,170,0.30); --ghz-brand-soft-45: rgba(254,215,170,0.45); --ghz-brand-soft-55: rgba(254,215,170,0.55); --ghz-brand-soft-70: rgba(254,215,170,0.70); --ghz-brand-glow-35: rgba(254,215,170,0.35); }
html[data-theme="lavender-mist"]  { --ghz-brand-color: #805ad5; --ghz-brand-hover: #6b46c1; --ghz-brand-active: #553c9a; --ghz-brand-soft-06: rgba(196,181,253,0.06); --ghz-brand-soft-08: rgba(196,181,253,0.08); --ghz-brand-soft-12: rgba(196,181,253,0.12); --ghz-brand-soft-18: rgba(196,181,253,0.18); --ghz-brand-soft-25: rgba(196,181,253,0.25); --ghz-brand-soft-30: rgba(196,181,253,0.30); --ghz-brand-soft-45: rgba(196,181,253,0.45); --ghz-brand-soft-55: rgba(196,181,253,0.55); --ghz-brand-soft-70: rgba(196,181,253,0.70); --ghz-brand-glow-35: rgba(196,181,253,0.35); }
html[data-theme="sky-blue"]       { --ghz-brand-color: #3182ce; --ghz-brand-hover: #2c5282; --ghz-brand-active: #2a4365; --ghz-brand-soft-06: rgba(168,206,234,0.06); --ghz-brand-soft-08: rgba(168,206,234,0.08); --ghz-brand-soft-12: rgba(168,206,234,0.12); --ghz-brand-soft-18: rgba(168,206,234,0.18); --ghz-brand-soft-25: rgba(168,206,234,0.25); --ghz-brand-soft-30: rgba(168,206,234,0.30); --ghz-brand-soft-45: rgba(168,206,234,0.45); --ghz-brand-soft-55: rgba(168,206,234,0.55); --ghz-brand-soft-70: rgba(168,206,234,0.70); --ghz-brand-glow-35: rgba(168,206,234,0.35); }
html[data-theme="sunset"]         { --ghz-brand-color: #dd6b20; --ghz-brand-hover: #c05621; --ghz-brand-active: #9c4221; --ghz-brand-soft-06: rgba(251,191,130,0.06); --ghz-brand-soft-08: rgba(251,191,130,0.08); --ghz-brand-soft-12: rgba(251,191,130,0.12); --ghz-brand-soft-18: rgba(251,191,130,0.18); --ghz-brand-soft-25: rgba(251,191,130,0.25); --ghz-brand-soft-30: rgba(251,191,130,0.30); --ghz-brand-soft-45: rgba(251,191,130,0.45); --ghz-brand-soft-55: rgba(251,191,130,0.55); --ghz-brand-soft-70: rgba(251,191,130,0.70); --ghz-brand-glow-35: rgba(251,191,130,0.35); }
html[data-theme="fire"]           { --ghz-brand-color: #e53e3e; --ghz-brand-hover: #c53030; --ghz-brand-active: #9b2c2c; --ghz-brand-soft-06: rgba(252,234,187,0.06); --ghz-brand-soft-08: rgba(252,234,187,0.08); --ghz-brand-soft-12: rgba(252,234,187,0.12); --ghz-brand-soft-18: rgba(252,234,187,0.18); --ghz-brand-soft-25: rgba(252,234,187,0.25); --ghz-brand-soft-30: rgba(252,234,187,0.30); --ghz-brand-soft-45: rgba(252,234,187,0.45); --ghz-brand-soft-55: rgba(252,234,187,0.55); --ghz-brand-soft-70: rgba(252,234,187,0.70); --ghz-brand-glow-35: rgba(252,234,187,0.35); }
html[data-theme="pink-bloom"]     { --ghz-brand-color: #ed64a6; --ghz-brand-hover: #d53f8c; --ghz-brand-active: #b83280; --ghz-brand-soft-06: rgba(252,207,221,0.06); --ghz-brand-soft-08: rgba(252,207,221,0.08); --ghz-brand-soft-12: rgba(252,207,221,0.12); --ghz-brand-soft-18: rgba(252,207,221,0.18); --ghz-brand-soft-25: rgba(252,207,221,0.25); --ghz-brand-soft-30: rgba(252,207,221,0.30); --ghz-brand-soft-45: rgba(252,207,221,0.45); --ghz-brand-soft-55: rgba(252,207,221,0.55); --ghz-brand-soft-70: rgba(252,207,221,0.70); --ghz-brand-glow-35: rgba(252,207,221,0.35); }
html[data-theme="cherry-blossom"] { --ghz-brand-color: #ec4899; --ghz-brand-hover: #db2777; --ghz-brand-active: #be185d; --ghz-brand-soft-06: rgba(252,207,221,0.06); --ghz-brand-soft-08: rgba(252,207,221,0.08); --ghz-brand-soft-12: rgba(252,207,221,0.12); --ghz-brand-soft-18: rgba(252,207,221,0.18); --ghz-brand-soft-25: rgba(252,207,221,0.25); --ghz-brand-soft-30: rgba(252,207,221,0.30); --ghz-brand-soft-45: rgba(252,207,221,0.45); --ghz-brand-soft-55: rgba(252,207,221,0.55); --ghz-brand-soft-70: rgba(252,207,221,0.70); --ghz-brand-glow-35: rgba(252,207,221,0.35); }
html[data-theme="coffee-cream"]   { --ghz-brand-color: #92400e; --ghz-brand-hover: #78350f; --ghz-brand-active: #b45309; --ghz-brand-soft-06: rgba(245,230,211,0.06); --ghz-brand-soft-08: rgba(245,230,211,0.08); --ghz-brand-soft-12: rgba(245,230,211,0.12); --ghz-brand-soft-18: rgba(245,230,211,0.18); --ghz-brand-soft-25: rgba(245,230,211,0.25); --ghz-brand-soft-30: rgba(245,230,211,0.30); --ghz-brand-soft-45: rgba(245,230,211,0.45); --ghz-brand-soft-55: rgba(245,230,211,0.55); --ghz-brand-soft-70: rgba(245,230,211,0.70); --ghz-brand-glow-35: rgba(245,230,211,0.35); }
html[data-theme="forest-pastel"]  { --ghz-brand-color: #15803d; --ghz-brand-hover: #166534; --ghz-brand-active: #14532d; --ghz-brand-soft-06: rgba(134,239,172,0.06); --ghz-brand-soft-08: rgba(134,239,172,0.08); --ghz-brand-soft-12: rgba(134,239,172,0.12); --ghz-brand-soft-18: rgba(134,239,172,0.18); --ghz-brand-soft-25: rgba(134,239,172,0.25); --ghz-brand-soft-30: rgba(134,239,172,0.30); --ghz-brand-soft-45: rgba(134,239,172,0.45); --ghz-brand-soft-55: rgba(134,239,172,0.55); --ghz-brand-soft-70: rgba(134,239,172,0.70); --ghz-brand-glow-35: rgba(134,239,172,0.35); }
html[data-theme="rose-pastel"]    { --ghz-brand-color: #ec4899; --ghz-brand-hover: #db2777; --ghz-brand-active: #be185d; --ghz-brand-soft-06: rgba(252,207,221,0.06); --ghz-brand-soft-08: rgba(252,207,221,0.08); --ghz-brand-soft-12: rgba(252,207,221,0.12); --ghz-brand-soft-18: rgba(252,207,221,0.18); --ghz-brand-soft-25: rgba(252,207,221,0.25); --ghz-brand-soft-30: rgba(252,207,221,0.30); --ghz-brand-soft-45: rgba(252,207,221,0.45); --ghz-brand-soft-55: rgba(252,207,221,0.55); --ghz-brand-soft-70: rgba(252,207,221,0.70); --ghz-brand-glow-35: rgba(252,207,221,0.35); }
html[data-theme="aurora-pastel"]  { --ghz-brand-color: #7c3aed; --ghz-brand-hover: #6d28d9; --ghz-brand-active: #5b21b6; --ghz-brand-soft-06: rgba(196,181,253,0.06); --ghz-brand-soft-08: rgba(196,181,253,0.08); --ghz-brand-soft-12: rgba(196,181,253,0.12); --ghz-brand-soft-18: rgba(196,181,253,0.18); --ghz-brand-soft-25: rgba(196,181,253,0.25); --ghz-brand-soft-30: rgba(196,181,253,0.30); --ghz-brand-soft-45: rgba(196,181,253,0.45); --ghz-brand-soft-55: rgba(196,181,253,0.55); --ghz-brand-soft-70: rgba(196,181,253,0.70); --ghz-brand-glow-35: rgba(196,181,253,0.35); }
html[data-theme="sunset-pastel"]  { --ghz-brand-color: #f97316; --ghz-brand-hover: #ea580c; --ghz-brand-active: #c2410c; --ghz-brand-soft-06: rgba(254,215,170,0.06); --ghz-brand-soft-08: rgba(254,215,170,0.08); --ghz-brand-soft-12: rgba(254,215,170,0.12); --ghz-brand-soft-18: rgba(254,215,170,0.18); --ghz-brand-soft-25: rgba(254,215,170,0.25); --ghz-brand-soft-30: rgba(254,215,170,0.30); --ghz-brand-soft-45: rgba(254,215,170,0.45); --ghz-brand-soft-55: rgba(254,215,170,0.55); --ghz-brand-soft-70: rgba(254,215,170,0.70); --ghz-brand-glow-35: rgba(254,215,170,0.35); }
html[data-theme="midnight"]       { --ghz-brand-color: #38b2ac; --ghz-brand-hover: #2d9d8f; --ghz-brand-active: #267e76; --ghz-brand-soft-06: rgba(56,178,172,0.10); --ghz-brand-soft-08: rgba(56,178,172,0.12); --ghz-brand-soft-12: rgba(56,178,172,0.20); --ghz-brand-soft-18: rgba(56,178,172,0.25); --ghz-brand-soft-25: rgba(56,178,172,0.30); --ghz-brand-soft-30: rgba(56,178,172,0.40); --ghz-brand-soft-45: rgba(56,178,172,0.55); --ghz-brand-soft-55: rgba(56,178,172,0.65); --ghz-brand-soft-70: rgba(56,178,172,0.75); --ghz-brand-glow-35: rgba(56,178,172,0.40); }
html[data-theme="deep-space"]     { --ghz-brand-color: #4fd1c5; --ghz-brand-hover: #38b2ac; --ghz-brand-active: #2c7a7b; --ghz-brand-soft-06: rgba(79,209,197,0.10); --ghz-brand-soft-08: rgba(79,209,197,0.12); --ghz-brand-soft-12: rgba(79,209,197,0.20); --ghz-brand-soft-18: rgba(79,209,197,0.25); --ghz-brand-soft-25: rgba(79,209,197,0.30); --ghz-brand-soft-30: rgba(79,209,197,0.40); --ghz-brand-soft-45: rgba(79,209,197,0.55); --ghz-brand-soft-55: rgba(79,209,197,0.65); --ghz-brand-soft-70: rgba(79,209,197,0.75); --ghz-brand-glow-35: rgba(79,209,197,0.40); }
html[data-theme="pure-dark"]      { --ghz-brand-color: #d4d4d8; --ghz-brand-hover: #a1a1aa; --ghz-brand-active: #71717a; --ghz-brand-soft-06: rgba(212,212,216,0.06); --ghz-brand-soft-08: rgba(212,212,216,0.08); --ghz-brand-soft-12: rgba(212,212,216,0.12); --ghz-brand-soft-18: rgba(212,212,216,0.18); --ghz-brand-soft-25: rgba(212,212,216,0.25); --ghz-brand-soft-30: rgba(212,212,216,0.30); --ghz-brand-soft-45: rgba(212,212,216,0.45); --ghz-brand-soft-55: rgba(212,212,216,0.55); --ghz-brand-soft-70: rgba(212,212,216,0.70); --ghz-brand-glow-35: rgba(212,212,216,0.35); }
html[data-theme="charcoal"]       { --ghz-brand-color: #90a4ae; --ghz-brand-hover: #607d8b; --ghz-brand-active: #455a64; --ghz-brand-soft-06: rgba(144,164,174,0.06); --ghz-brand-soft-08: rgba(144,164,174,0.08); --ghz-brand-soft-12: rgba(144,164,174,0.12); --ghz-brand-soft-18: rgba(144,164,174,0.18); --ghz-brand-soft-25: rgba(144,164,174,0.25); --ghz-brand-soft-30: rgba(144,164,174,0.30); --ghz-brand-soft-45: rgba(144,164,174,0.45); --ghz-brand-soft-55: rgba(144,164,174,0.55); --ghz-brand-soft-70: rgba(144,164,174,0.70); --ghz-brand-glow-35: rgba(144,164,174,0.35); }
html[data-theme="purple-haze"]    { --ghz-brand-color: #b794f4; --ghz-brand-hover: #9f7aea; --ghz-brand-active: #805ad5; --ghz-brand-soft-06: rgba(183,148,244,0.10); --ghz-brand-soft-08: rgba(183,148,244,0.12); --ghz-brand-soft-12: rgba(183,148,244,0.20); --ghz-brand-soft-18: rgba(183,148,244,0.25); --ghz-brand-soft-25: rgba(183,148,244,0.30); --ghz-brand-soft-30: rgba(183,148,244,0.40); --ghz-brand-soft-45: rgba(183,148,244,0.55); --ghz-brand-soft-55: rgba(183,148,244,0.65); --ghz-brand-soft-70: rgba(183,148,244,0.75); --ghz-brand-glow-35: rgba(183,148,244,0.40); }