glass-studio-ui-pro 0.1.7 → 0.1.9

package/dist/style.css

@@ -1 +1 @@
-.cm-checkbox-container[data-v-d47cd0ab]{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .2s}.cm-checkbox-container.disabled[data-v-d47cd0ab]{cursor:not-allowed;opacity:.5}.cm-checkbox-wrapper[data-v-d47cd0ab]{position:relative;width:20px;height:20px}.cm-checkbox-wrapper input[data-v-d47cd0ab]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.cm-checkbox-box[data-v-d47cd0ab]{position:absolute;top:0;left:0;height:20px;width:20px;background:rgba(var(--glass-bg-rgb),.1);border:1px solid rgba(var(--glass-border-rgb),.2);border-radius:6px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.cm-checkbox-box .cm-checkbox-icon[data-v-d47cd0ab]{width:14px;height:14px;color:#fff;stroke-width:3px;transition:transform .2s}.cm-checkbox-wrapper input:checked~.cm-checkbox-box[data-v-d47cd0ab]{background:var(--primary-color);border-color:var(--primary-color);box-shadow:0 0 10px rgba(var(--primary-color-rgb),.3)}.cm-checkbox-container:hover .cm-checkbox-box[data-v-d47cd0ab]{border-color:rgba(var(--glass-border-rgb),.4);background:rgba(var(--glass-bg-rgb),.2)}.cm-checkbox-label[data-v-d47cd0ab]{font-size:.9rem;color:var(--text-color);opacity:.8}.cm-glass-filters[data-v-52af4cfb]{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
+[data-theme=dark],.dark-mode{--glass-bg-rgb: 17, 24, 39;--glass-border-rgb: 255, 255, 255;--text-color: #f9fafb;--bg-color: #0b0f1a;--primary-color: #818cf8;--primary-color-rgb: 129, 140, 248;--surface-color: rgba(17, 24, 39, .6);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .3)}.bg-liquid-glass{background-image:url(https://essential-addons.com/wp-content/uploads/2025/08/tropical-leaves-blue-yellow-jungle-foliage-artwork-3.webp);height:100vh;overflow:auto;color:var(--text-color);transition:background-color .3s ease,color .3s ease}.bg-liquid-glass:before,.bg-liquid-glass:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);z-index:-2;opacity:.6;animation:flow 20s infinite alternate linear}.bg-liquid-glass:before{width:300px;height:300px;background:radial-gradient(circle,var(--primary-color) 0%,transparent 70%);top:-50px;right:-50px}.bg-liquid-glass:after{width:400px;height:400px;background:radial-gradient(circle,#ec4899 0%,transparent 70%);bottom:-100px;left:-100px;animation-delay:-10s}@keyframes flow{0%{transform:translate(0) scale(1)}50%{transform:translate(100px,50px) scale(1.2)}to{transform:translate(-50px,100px) scale(.8)}}.cm-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:.75rem 1.5rem;border:1px solid rgba(var(--glass-border-rgb),.15);color:var(--text-color);font-family:inherit;font-weight:600;cursor:pointer;overflow:hidden;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a}.cm-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);z-index:1}.cm-btn-content{position:relative;z-index:2;display:flex;align-items:center;gap:.5rem}.cm-btn:hover{transform:translateY(-2px);border-color:rgba(var(--glass-border-rgb),.3);box-shadow:0 6px 16px #00000026;background:rgba(var(--glass-bg-rgb),.2)!important}.cm-btn:active,.cm-btn-active{transform:translateY(0) scale(.96);background:rgba(var(--glass-bg-rgb),.3)!important}.cm-btn-primary{border:1px solid var(--primary-color);background:linear-gradient(135deg,rgba(var(--primary-color-rgb),.3),rgba(var(--primary-color-rgb),.1));color:var(--primary-color)}.cm-btn-primary:hover{background:linear-gradient(135deg,rgba(var(--primary-color-rgb),.4),rgba(var(--primary-color-rgb),.2))!important}.cm-btn-glow{box-shadow:0 0 20px rgba(var(--primary-color-rgb),.3)}.cm-btn-glow:hover{box-shadow:0 0 30px rgba(var(--primary-color-rgb),.5)}.cm-card{position:relative;overflow:hidden;transition:all .3s ease;padding:1.5rem;border:1px solid rgba(var(--glass-border-rgb),.1);box-shadow:var(--glass-shadow)}.cm-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);z-index:-1}.cm-card-header{border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:1rem;padding-bottom:.5rem}.cm-card-footer{border-top:1px solid rgba(255,255,255,.08);margin-top:1rem;padding-top:.5rem}:root{--c-light: #fff;--c-dark: #000;--glass-reflex-dark: 2;--glass-reflex-light: 2;--cm-shadow-mist: 0px 19px 26px 0px rgba(0, 0, 0, .2);--cm-shadow-reflex: inset 0 0 0 2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);--glass-bg-rgb: 255, 255, 255;--glass-border-rgb: 255, 255, 255;--text-color: #1a1a2e;--bg-color: #f0f2f5;--primary-color: #6366f1;--primary-color-rgb: 99, 102, 241;--surface-color: rgba(255, 255, 255, .4);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .07);--red-50: rgb(254.2, 245.65, 245.65);--red-100: rgb(252.6, 226.95, 226.95);--red-200: rgb(250.2, 198.9, 198.9);--red-300: rgb(247, 161.5, 161.5);--red-400: rgb(243, 114.75, 114.75);--red-500: #ef4444;--red-600: rgb(203.15, 57.8, 57.8);--red-700: rgb(155.35, 44.2, 44.2);--red-800: rgb(107.55, 30.6, 30.6);--red-900: rgb(59.75, 17, 17);--orange-50: rgb(254.7, 248, 243.35);--orange-100: rgb(254.1, 234, 220.05);--orange-200: rgb(253.2, 213, 185.1);--orange-300: rgb(252, 185, 138.5);--orange-400: rgb(250.5, 150, 80.25);--orange-500: #f97316;--orange-600: rgb(211.65, 97.75, 18.7);--orange-700: rgb(161.85, 74.75, 14.3);--orange-800: rgb(112.05, 51.75, 9.9);--orange-900: rgb(62.25, 28.75, 5.5);--yellow-50: rgb(255, 251.9, 242.6);--yellow-100: rgb(255, 245.7, 217.8);--yellow-200: rgb(255, 236.4, 180.6);--yellow-300: #ffe083;--yellow-400: rgb(255, 208.5, 69);--yellow-500: #ffc107;--yellow-600: rgb(216.75, 164.05, 5.95);--yellow-700: rgb(165.75, 125.45, 4.55);--yellow-800: rgb(114.75, 86.85, 3.15);--yellow-900: rgb(63.75, 48.25, 1.75);--green-50: rgb(243.95, 252.1, 246.95);--green-100: rgb(221.85, 246.3, 230.85);--green-200: rgb(188.7, 237.6, 206.7);--green-300: rgb(144.5, 226, 174.5);--green-400: rgb(89.25, 211.5, 134.25);--green-500: #22c55e;--green-600: rgb(28.9, 167.45, 79.9);--green-700: rgb(22.1, 128.05, 61.1);--green-800: rgb(15.3, 88.65, 42.3);--green-900: rgb(8.5, 49.25, 23.5);--mint-50: rgb(243.05, 251.5, 248.7);--mint-100: rgb(219.15, 244.5, 236.1);--mint-200: rgb(183.3, 234, 217.2);--mint-300: rgb(135.5, 220, 192);--mint-400: rgb(75.75, 202.5, 160.5);--mint-500: #10b981;--mint-600: rgb(13.6, 157.25, 109.65);--mint-700: rgb(10.4, 120.25, 83.85);--mint-800: rgb(7.2, 83.25, 58.05);--mint-900: rgb(4, 46.25, 32.25);--cyan-50: rgb(242.55, 251.35, 252.85);--cyan-100: rgb(217.65, 244.05, 248.55);--cyan-200: rgb(180.3, 233.1, 242.1);--cyan-300: rgb(130.5, 218.5, 233.5);--cyan-400: rgb(68.25, 200.25, 222.75);--cyan-500: #06b6d4;--cyan-600: rgb(5.1, 154.7, 180.2);--cyan-700: rgb(3.9, 118.3, 137.8);--cyan-800: rgb(2.7, 81.9, 95.4);--cyan-900: rgb(1.5, 45.5, 53);--blue-50: rgb(245.2, 248.75, 254.55);--blue-100: rgb(225.6, 236.25, 253.65);--blue-200: rgb(196.2, 217.5, 252.3);--blue-300: rgb(157, 192.5, 250.5);--blue-400: rgb(108, 161.25, 248.25);--blue-500: #3b82f6;--blue-600: rgb(50.15, 110.5, 209.1);--blue-700: rgb(38.35, 84.5, 159.9);--blue-800: rgb(26.55, 58.5, 110.7);--blue-900: rgb(14.75, 32.5, 61.5);--brand-50: rgb(243.55, 245.45, 248.9);--brand-100: rgb(220.65, 226.35, 236.7);--brand-200: rgb(186.3, 197.7, 218.4);--brand-300: rgb(140.5, 159.5, 194);--brand-400: rgb(83.25, 111.75, 163.5);--brand-500: #1a4085;--brand-600: rgb(22.1, 54.4, 113.05);--brand-700: rgb(16.9, 41.6, 86.45);--brand-800: rgb(11.7, 28.8, 59.85);--brand-900: rgb(6.5, 16, 33.25);--indigo-50: rgb(247.2, 247.35, 254.3);--indigo-100: rgb(231.6, 232.05, 252.9);--indigo-200: rgb(208.2, 209.1, 250.8);--indigo-300: rgb(177, 178.5, 248);--indigo-400: rgb(138, 140.25, 244.5);--indigo-500: #6366f1;--indigo-600: rgb(84.15, 86.7, 204.85);--indigo-700: rgb(64.35, 66.3, 156.65);--indigo-800: rgb(44.55, 45.9, 108.45);--indigo-900: rgb(24.75, 25.5, 60.25);--purple-50: rgb(250.65, 246.5, 254.6);--purple-100: rgb(241.95, 229.5, 253.8);--purple-200: rgb(228.9, 204, 252.6);--purple-300: rgb(211.5, 170, 251);--purple-400: rgb(189.75, 127.5, 249);--purple-500: #a855f7;--purple-600: rgb(142.8, 72.25, 209.95);--purple-700: rgb(109.2, 55.25, 160.55);--purple-800: rgb(75.6, 38.25, 111.15);--purple-900: rgb(42, 21.25, 61.75);--gray-50: rgb(247.6, 247.95, 248.65);--gray-100: rgb(232.8, 233.85, 235.95);--gray-200: rgb(210.6, 212.7, 216.9);--gray-300: rgb(181, 184.5, 191.5);--gray-400: rgb(144, 149.25, 159.75);--gray-500: #6b7280;--gray-600: rgb(90.95, 96.9, 108.8);--gray-700: rgb(69.55, 74.1, 83.2);--gray-800: rgb(48.15, 51.3, 57.6);--gray-900: rgb(26.75, 28.5, 32);--white: #ffffff;--black: #111111}.bg-red-100{background-color:var(--red-100)!important}.txt-red-100{color:var(--red-100)!important}.border-red-100{border-color:var(--red-100)!important}.bg-red-200{background-color:var(--red-200)!important}.txt-red-200{color:var(--red-200)!important}.border-red-200{border-color:var(--red-200)!important}.bg-red-300{background-color:var(--red-300)!important}.txt-red-300{color:var(--red-300)!important}.border-red-300{border-color:var(--red-300)!important}.bg-red-400{background-color:var(--red-400)!important}.txt-red-400{color:var(--red-400)!important}.border-red-400{border-color:var(--red-400)!important}.bg-red-500{background-color:var(--red-500)!important}.txt-red-500{color:var(--red-500)!important}.border-red-500{border-color:var(--red-500)!important}.bg-red-600{background-color:var(--red-600)!important}.txt-red-600{color:var(--red-600)!important}.border-red-600{border-color:var(--red-600)!important}.bg-red-700{background-color:var(--red-700)!important}.txt-red-700{color:var(--red-700)!important}.border-red-700{border-color:var(--red-700)!important}.bg-red-800{background-color:var(--red-800)!important}.txt-red-800{color:var(--red-800)!important}.border-red-800{border-color:var(--red-800)!important}.bg-red-900{background-color:var(--red-900)!important}.txt-red-900{color:var(--red-900)!important}.border-red-900{border-color:var(--red-900)!important}.bg-red-50{background-color:var(--red-50)!important}.txt-red-50{color:var(--red-50)!important}.border-red-50{border-color:var(--red-50)!important}.bg-orange-100{background-color:var(--orange-100)!important}.txt-orange-100{color:var(--orange-100)!important}.border-orange-100{border-color:var(--orange-100)!important}.bg-orange-200{background-color:var(--orange-200)!important}.txt-orange-200{color:var(--orange-200)!important}.border-orange-200{border-color:var(--orange-200)!important}.bg-orange-300{background-color:var(--orange-300)!important}.txt-orange-300{color:var(--orange-300)!important}.border-orange-300{border-color:var(--orange-300)!important}.bg-orange-400{background-color:var(--orange-400)!important}.txt-orange-400{color:var(--orange-400)!important}.border-orange-400{border-color:var(--orange-400)!important}.bg-orange-500{background-color:var(--orange-500)!important}.txt-orange-500{color:var(--orange-500)!important}.border-orange-500{border-color:var(--orange-500)!important}.bg-orange-600{background-color:var(--orange-600)!important}.txt-orange-600{color:var(--orange-600)!important}.border-orange-600{border-color:var(--orange-600)!important}.bg-orange-700{background-color:var(--orange-700)!important}.txt-orange-700{color:var(--orange-700)!important}.border-orange-700{border-color:var(--orange-700)!important}.bg-orange-800{background-color:var(--orange-800)!important}.txt-orange-800{color:var(--orange-800)!important}.border-orange-800{border-color:var(--orange-800)!important}.bg-orange-900{background-color:var(--orange-900)!important}.txt-orange-900{color:var(--orange-900)!important}.border-orange-900{border-color:var(--orange-900)!important}.bg-orange-50{background-color:var(--orange-50)!important}.txt-orange-50{color:var(--orange-50)!important}.border-orange-50{border-color:var(--orange-50)!important}.bg-yellow-100{background-color:var(--yellow-100)!important}.txt-yellow-100{color:var(--yellow-100)!important}.border-yellow-100{border-color:var(--yellow-100)!important}.bg-yellow-200{background-color:var(--yellow-200)!important}.txt-yellow-200{color:var(--yellow-200)!important}.border-yellow-200{border-color:var(--yellow-200)!important}.bg-yellow-300{background-color:var(--yellow-300)!important}.txt-yellow-300{color:var(--yellow-300)!important}.border-yellow-300{border-color:var(--yellow-300)!important}.bg-yellow-400{background-color:var(--yellow-400)!important}.txt-yellow-400{color:var(--yellow-400)!important}.border-yellow-400{border-color:var(--yellow-400)!important}.bg-yellow-500{background-color:var(--yellow-500)!important}.txt-yellow-500{color:var(--yellow-500)!important}.border-yellow-500{border-color:var(--yellow-500)!important}.bg-yellow-600{background-color:var(--yellow-600)!important}.txt-yellow-600{color:var(--yellow-600)!important}.border-yellow-600{border-color:var(--yellow-600)!important}.bg-yellow-700{background-color:var(--yellow-700)!important}.txt-yellow-700{color:var(--yellow-700)!important}.border-yellow-700{border-color:var(--yellow-700)!important}.bg-yellow-800{background-color:var(--yellow-800)!important}.txt-yellow-800{color:var(--yellow-800)!important}.border-yellow-800{border-color:var(--yellow-800)!important}.bg-yellow-900{background-color:var(--yellow-900)!important}.txt-yellow-900{color:var(--yellow-900)!important}.border-yellow-900{border-color:var(--yellow-900)!important}.bg-yellow-50{background-color:var(--yellow-50)!important}.txt-yellow-50{color:var(--yellow-50)!important}.border-yellow-50{border-color:var(--yellow-50)!important}.bg-green-100{background-color:var(--green-100)!important}.txt-green-100{color:var(--green-100)!important}.border-green-100{border-color:var(--green-100)!important}.bg-green-200{background-color:var(--green-200)!important}.txt-green-200{color:var(--green-200)!important}.border-green-200{border-color:var(--green-200)!important}.bg-green-300{background-color:var(--green-300)!important}.txt-green-300{color:var(--green-300)!important}.border-green-300{border-color:var(--green-300)!important}.bg-green-400{background-color:var(--green-400)!important}.txt-green-400{color:var(--green-400)!important}.border-green-400{border-color:var(--green-400)!important}.bg-green-500{background-color:var(--green-500)!important}.txt-green-500{color:var(--green-500)!important}.border-green-500{border-color:var(--green-500)!important}.bg-green-600{background-color:var(--green-600)!important}.txt-green-600{color:var(--green-600)!important}.border-green-600{border-color:var(--green-600)!important}.bg-green-700{background-color:var(--green-700)!important}.txt-green-700{color:var(--green-700)!important}.border-green-700{border-color:var(--green-700)!important}.bg-green-800{background-color:var(--green-800)!important}.txt-green-800{color:var(--green-800)!important}.border-green-800{border-color:var(--green-800)!important}.bg-green-900{background-color:var(--green-900)!important}.txt-green-900{color:var(--green-900)!important}.border-green-900{border-color:var(--green-900)!important}.bg-green-50{background-color:var(--green-50)!important}.txt-green-50{color:var(--green-50)!important}.border-green-50{border-color:var(--green-50)!important}.bg-mint-100{background-color:var(--mint-100)!important}.txt-mint-100{color:var(--mint-100)!important}.border-mint-100{border-color:var(--mint-100)!important}.bg-mint-200{background-color:var(--mint-200)!important}.txt-mint-200{color:var(--mint-200)!important}.border-mint-200{border-color:var(--mint-200)!important}.bg-mint-300{background-color:var(--mint-300)!important}.txt-mint-300{color:var(--mint-300)!important}.border-mint-300{border-color:var(--mint-300)!important}.bg-mint-400{background-color:var(--mint-400)!important}.txt-mint-400{color:var(--mint-400)!important}.border-mint-400{border-color:var(--mint-400)!important}.bg-mint-500{background-color:var(--mint-500)!important}.txt-mint-500{color:var(--mint-500)!important}.border-mint-500{border-color:var(--mint-500)!important}.bg-mint-600{background-color:var(--mint-600)!important}.txt-mint-600{color:var(--mint-600)!important}.border-mint-600{border-color:var(--mint-600)!important}.bg-mint-700{background-color:var(--mint-700)!important}.txt-mint-700{color:var(--mint-700)!important}.border-mint-700{border-color:var(--mint-700)!important}.bg-mint-800{background-color:var(--mint-800)!important}.txt-mint-800{color:var(--mint-800)!important}.border-mint-800{border-color:var(--mint-800)!important}.bg-mint-900{background-color:var(--mint-900)!important}.txt-mint-900{color:var(--mint-900)!important}.border-mint-900{border-color:var(--mint-900)!important}.bg-mint-50{background-color:var(--mint-50)!important}.txt-mint-50{color:var(--mint-50)!important}.border-mint-50{border-color:var(--mint-50)!important}.bg-cyan-100{background-color:var(--cyan-100)!important}.txt-cyan-100{color:var(--cyan-100)!important}.border-cyan-100{border-color:var(--cyan-100)!important}.bg-cyan-200{background-color:var(--cyan-200)!important}.txt-cyan-200{color:var(--cyan-200)!important}.border-cyan-200{border-color:var(--cyan-200)!important}.bg-cyan-300{background-color:var(--cyan-300)!important}.txt-cyan-300{color:var(--cyan-300)!important}.border-cyan-300{border-color:var(--cyan-300)!important}.bg-cyan-400{background-color:var(--cyan-400)!important}.txt-cyan-400{color:var(--cyan-400)!important}.border-cyan-400{border-color:var(--cyan-400)!important}.bg-cyan-500{background-color:var(--cyan-500)!important}.txt-cyan-500{color:var(--cyan-500)!important}.border-cyan-500{border-color:var(--cyan-500)!important}.bg-cyan-600{background-color:var(--cyan-600)!important}.txt-cyan-600{color:var(--cyan-600)!important}.border-cyan-600{border-color:var(--cyan-600)!important}.bg-cyan-700{background-color:var(--cyan-700)!important}.txt-cyan-700{color:var(--cyan-700)!important}.border-cyan-700{border-color:var(--cyan-700)!important}.bg-cyan-800{background-color:var(--cyan-800)!important}.txt-cyan-800{color:var(--cyan-800)!important}.border-cyan-800{border-color:var(--cyan-800)!important}.bg-cyan-900{background-color:var(--cyan-900)!important}.txt-cyan-900{color:var(--cyan-900)!important}.border-cyan-900{border-color:var(--cyan-900)!important}.bg-cyan-50{background-color:var(--cyan-50)!important}.txt-cyan-50{color:var(--cyan-50)!important}.border-cyan-50{border-color:var(--cyan-50)!important}.bg-blue-100{background-color:var(--blue-100)!important}.txt-blue-100{color:var(--blue-100)!important}.border-blue-100{border-color:var(--blue-100)!important}.bg-blue-200{background-color:var(--blue-200)!important}.txt-blue-200{color:var(--blue-200)!important}.border-blue-200{border-color:var(--blue-200)!important}.bg-blue-300{background-color:var(--blue-300)!important}.txt-blue-300{color:var(--blue-300)!important}.border-blue-300{border-color:var(--blue-300)!important}.bg-blue-400{background-color:var(--blue-400)!important}.txt-blue-400{color:var(--blue-400)!important}.border-blue-400{border-color:var(--blue-400)!important}.bg-blue-500{background-color:var(--blue-500)!important}.txt-blue-500{color:var(--blue-500)!important}.border-blue-500{border-color:var(--blue-500)!important}.bg-blue-600{background-color:var(--blue-600)!important}.txt-blue-600{color:var(--blue-600)!important}.border-blue-600{border-color:var(--blue-600)!important}.bg-blue-700{background-color:var(--blue-700)!important}.txt-blue-700{color:var(--blue-700)!important}.border-blue-700{border-color:var(--blue-700)!important}.bg-blue-800{background-color:var(--blue-800)!important}.txt-blue-800{color:var(--blue-800)!important}.border-blue-800{border-color:var(--blue-800)!important}.bg-blue-900{background-color:var(--blue-900)!important}.txt-blue-900{color:var(--blue-900)!important}.border-blue-900{border-color:var(--blue-900)!important}.bg-blue-50{background-color:var(--blue-50)!important}.txt-blue-50{color:var(--blue-50)!important}.border-blue-50{border-color:var(--blue-50)!important}.bg-brand-100{background-color:var(--brand-100)!important}.txt-brand-100{color:var(--brand-100)!important}.border-brand-100{border-color:var(--brand-100)!important}.bg-brand-200{background-color:var(--brand-200)!important}.txt-brand-200{color:var(--brand-200)!important}.border-brand-200{border-color:var(--brand-200)!important}.bg-brand-300{background-color:var(--brand-300)!important}.txt-brand-300{color:var(--brand-300)!important}.border-brand-300{border-color:var(--brand-300)!important}.bg-brand-400{background-color:var(--brand-400)!important}.txt-brand-400{color:var(--brand-400)!important}.border-brand-400{border-color:var(--brand-400)!important}.bg-brand-500{background-color:var(--brand-500)!important}.txt-brand-500{color:var(--brand-500)!important}.border-brand-500{border-color:var(--brand-500)!important}.bg-brand-600{background-color:var(--brand-600)!important}.txt-brand-600{color:var(--brand-600)!important}.border-brand-600{border-color:var(--brand-600)!important}.bg-brand-700{background-color:var(--brand-700)!important}.txt-brand-700{color:var(--brand-700)!important}.border-brand-700{border-color:var(--brand-700)!important}.bg-brand-800{background-color:var(--brand-800)!important}.txt-brand-800{color:var(--brand-800)!important}.border-brand-800{border-color:var(--brand-800)!important}.bg-brand-900{background-color:var(--brand-900)!important}.txt-brand-900{color:var(--brand-900)!important}.border-brand-900{border-color:var(--brand-900)!important}.bg-brand-50{background-color:var(--brand-50)!important}.txt-brand-50{color:var(--brand-50)!important}.border-brand-50{border-color:var(--brand-50)!important}.bg-indigo-100{background-color:var(--indigo-100)!important}.txt-indigo-100{color:var(--indigo-100)!important}.border-indigo-100{border-color:var(--indigo-100)!important}.bg-indigo-200{background-color:var(--indigo-200)!important}.txt-indigo-200{color:var(--indigo-200)!important}.border-indigo-200{border-color:var(--indigo-200)!important}.bg-indigo-300{background-color:var(--indigo-300)!important}.txt-indigo-300{color:var(--indigo-300)!important}.border-indigo-300{border-color:var(--indigo-300)!important}.bg-indigo-400{background-color:var(--indigo-400)!important}.txt-indigo-400{color:var(--indigo-400)!important}.border-indigo-400{border-color:var(--indigo-400)!important}.bg-indigo-500{background-color:var(--indigo-500)!important}.txt-indigo-500{color:var(--indigo-500)!important}.border-indigo-500{border-color:var(--indigo-500)!important}.bg-indigo-600{background-color:var(--indigo-600)!important}.txt-indigo-600{color:var(--indigo-600)!important}.border-indigo-600{border-color:var(--indigo-600)!important}.bg-indigo-700{background-color:var(--indigo-700)!important}.txt-indigo-700{color:var(--indigo-700)!important}.border-indigo-700{border-color:var(--indigo-700)!important}.bg-indigo-800{background-color:var(--indigo-800)!important}.txt-indigo-800{color:var(--indigo-800)!important}.border-indigo-800{border-color:var(--indigo-800)!important}.bg-indigo-900{background-color:var(--indigo-900)!important}.txt-indigo-900{color:var(--indigo-900)!important}.border-indigo-900{border-color:var(--indigo-900)!important}.bg-indigo-50{background-color:var(--indigo-50)!important}.txt-indigo-50{color:var(--indigo-50)!important}.border-indigo-50{border-color:var(--indigo-50)!important}.bg-purple-100{background-color:var(--purple-100)!important}.txt-purple-100{color:var(--purple-100)!important}.border-purple-100{border-color:var(--purple-100)!important}.bg-purple-200{background-color:var(--purple-200)!important}.txt-purple-200{color:var(--purple-200)!important}.border-purple-200{border-color:var(--purple-200)!important}.bg-purple-300{background-color:var(--purple-300)!important}.txt-purple-300{color:var(--purple-300)!important}.border-purple-300{border-color:var(--purple-300)!important}.bg-purple-400{background-color:var(--purple-400)!important}.txt-purple-400{color:var(--purple-400)!important}.border-purple-400{border-color:var(--purple-400)!important}.bg-purple-500{background-color:var(--purple-500)!important}.txt-purple-500{color:var(--purple-500)!important}.border-purple-500{border-color:var(--purple-500)!important}.bg-purple-600{background-color:var(--purple-600)!important}.txt-purple-600{color:var(--purple-600)!important}.border-purple-600{border-color:var(--purple-600)!important}.bg-purple-700{background-color:var(--purple-700)!important}.txt-purple-700{color:var(--purple-700)!important}.border-purple-700{border-color:var(--purple-700)!important}.bg-purple-800{background-color:var(--purple-800)!important}.txt-purple-800{color:var(--purple-800)!important}.border-purple-800{border-color:var(--purple-800)!important}.bg-purple-900{background-color:var(--purple-900)!important}.txt-purple-900{color:var(--purple-900)!important}.border-purple-900{border-color:var(--purple-900)!important}.bg-purple-50{background-color:var(--purple-50)!important}.txt-purple-50{color:var(--purple-50)!important}.border-purple-50{border-color:var(--purple-50)!important}.bg-gray-100{background-color:var(--gray-100)!important}.txt-gray-100{color:var(--gray-100)!important}.border-gray-100{border-color:var(--gray-100)!important}.bg-gray-200{background-color:var(--gray-200)!important}.txt-gray-200{color:var(--gray-200)!important}.border-gray-200{border-color:var(--gray-200)!important}.bg-gray-300{background-color:var(--gray-300)!important}.txt-gray-300{color:var(--gray-300)!important}.border-gray-300{border-color:var(--gray-300)!important}.bg-gray-400{background-color:var(--gray-400)!important}.txt-gray-400{color:var(--gray-400)!important}.border-gray-400{border-color:var(--gray-400)!important}.bg-gray-500{background-color:var(--gray-500)!important}.txt-gray-500{color:var(--gray-500)!important}.border-gray-500{border-color:var(--gray-500)!important}.bg-gray-600{background-color:var(--gray-600)!important}.txt-gray-600{color:var(--gray-600)!important}.border-gray-600{border-color:var(--gray-600)!important}.bg-gray-700{background-color:var(--gray-700)!important}.txt-gray-700{color:var(--gray-700)!important}.border-gray-700{border-color:var(--gray-700)!important}.bg-gray-800{background-color:var(--gray-800)!important}.txt-gray-800{color:var(--gray-800)!important}.border-gray-800{border-color:var(--gray-800)!important}.bg-gray-900{background-color:var(--gray-900)!important}.txt-gray-900{color:var(--gray-900)!important}.border-gray-900{border-color:var(--gray-900)!important}.bg-gray-50{background-color:var(--gray-50)!important}.txt-gray-50{color:var(--gray-50)!important}.border-gray-50{border-color:var(--gray-50)!important}.bg-white{background-color:var(--white)!important}.bg-black{background-color:var(--black)!important}.txt-white{color:var(--white)!important}.txt-black{color:var(--black)!important}.bg-transparent{background-color:transparent!important}.cm-container{background:rgba(var(--glass-bg-rgb),.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(var(--glass-border-rgb),.15);box-shadow:0 4px 15px #0000001a}.cm-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(0,0,0,.05) 100%);z-index:-1}.cm-container{border-radius:20px;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.cm-card-legacy{background:rgba(var(--glass-bg-rgb),.1);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(var(--glass-border-rgb),.12);box-shadow:0 4px 15px #0000001a}.cm-card-legacy:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(0,0,0,.05) 100%);z-index:-1}.cm-card-legacy{border-radius:16px;padding:1.5rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.125)}.cm-card-legacy:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00000026;background:rgba(var(--glass-bg-rgb),.18)}.cm-btn-legacy{background:rgba(var(--glass-bg-rgb),.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(var(--glass-border-rgb),.1)}.cm-btn-legacy:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%,rgba(0,0,0,.05) 100%);z-index:-1}.cm-btn-legacy{border-radius:10px;padding:.6rem 1.25rem;color:var(--text-color);font-weight:600;cursor:pointer;border:none;background:rgba(var(--glass-bg-rgb),.12);transition:all .3s cubic-bezier(.4,0,.2,1)}.cm-btn-legacy:hover{background:rgba(var(--glass-bg-rgb),.25);transform:scale(1.02)}.cm-gradient-text{background:linear-gradient(to right,#6366f1,#a855f7,#ec4899);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}.cm-grain:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}.flex{display:flex!important}.col,.flex-column{display:flex;flex-direction:column!important}.row,.flex-row{display:flex;flex-direction:row!important}.wrap{flex-wrap:wrap!important}.j-center{justify-content:center!important}.j-end{justify-content:flex-end!important}.j-start{justify-content:flex-start!important}.j-between{justify-content:space-between!important}.j-around{justify-content:space-around!important}.a-center{align-items:center!important}.a-end{align-items:flex-end!important}.a-start{align-items:flex-start!important}.j-a-center{display:flex!important;justify-content:center!important;align-items:center!important}.g-1{gap:.25rem!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mr-1{margin-right:.25rem!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.pr-1{padding-right:.25rem!important}.txt-1{font-size:.25rem!important}.txt-1-100{font-size:.25rem!important;font-weight:100!important}.txt-1-200{font-size:.25rem!important;font-weight:200!important}.txt-1-300{font-size:.25rem!important;font-weight:300!important}.txt-1-400{font-size:.25rem!important;font-weight:400!important}.txt-1-500{font-size:.25rem!important;font-weight:500!important}.txt-1-600{font-size:.25rem!important;font-weight:600!important}.txt-1-700{font-size:.25rem!important;font-weight:700!important}.txt-1-800{font-size:.25rem!important;font-weight:800!important}.txt-1-900{font-size:.25rem!important;font-weight:900!important}.g-2{gap:.5rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mr-2{margin-right:.5rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.pr-2{padding-right:.5rem!important}.txt-2{font-size:.5rem!important}.txt-2-100{font-size:.5rem!important;font-weight:100!important}.txt-2-200{font-size:.5rem!important;font-weight:200!important}.txt-2-300{font-size:.5rem!important;font-weight:300!important}.txt-2-400{font-size:.5rem!important;font-weight:400!important}.txt-2-500{font-size:.5rem!important;font-weight:500!important}.txt-2-600{font-size:.5rem!important;font-weight:600!important}.txt-2-700{font-size:.5rem!important;font-weight:700!important}.txt-2-800{font-size:.5rem!important;font-weight:800!important}.txt-2-900{font-size:.5rem!important;font-weight:900!important}.g-3{gap:.75rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mr-3{margin-right:.75rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.pr-3{padding-right:.75rem!important}.txt-3{font-size:.75rem!important}.txt-3-100{font-size:.75rem!important;font-weight:100!important}.txt-3-200{font-size:.75rem!important;font-weight:200!important}.txt-3-300{font-size:.75rem!important;font-weight:300!important}.txt-3-400{font-size:.75rem!important;font-weight:400!important}.txt-3-500{font-size:.75rem!important;font-weight:500!important}.txt-3-600{font-size:.75rem!important;font-weight:600!important}.txt-3-700{font-size:.75rem!important;font-weight:700!important}.txt-3-800{font-size:.75rem!important;font-weight:800!important}.txt-3-900{font-size:.75rem!important;font-weight:900!important}.g-4{gap:1rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mr-4{margin-right:1rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.pr-4{padding-right:1rem!important}.txt-4{font-size:1rem!important}.txt-4-100{font-size:1rem!important;font-weight:100!important}.txt-4-200{font-size:1rem!important;font-weight:200!important}.txt-4-300{font-size:1rem!important;font-weight:300!important}.txt-4-400{font-size:1rem!important;font-weight:400!important}.txt-4-500{font-size:1rem!important;font-weight:500!important}.txt-4-600{font-size:1rem!important;font-weight:600!important}.txt-4-700{font-size:1rem!important;font-weight:700!important}.txt-4-800{font-size:1rem!important;font-weight:800!important}.txt-4-900{font-size:1rem!important;font-weight:900!important}.g-5{gap:1.25rem!important}.m-5{margin:1.25rem!important}.mt-5{margin-top:1.25rem!important}.mb-5{margin-bottom:1.25rem!important}.ml-5{margin-left:1.25rem!important}.mr-5{margin-right:1.25rem!important}.p-5{padding:1.25rem!important}.pt-5{padding-top:1.25rem!important}.pb-5{padding-bottom:1.25rem!important}.pl-5{padding-left:1.25rem!important}.pr-5{padding-right:1.25rem!important}.txt-5{font-size:1.25rem!important}.txt-5-100{font-size:1.25rem!important;font-weight:100!important}.txt-5-200{font-size:1.25rem!important;font-weight:200!important}.txt-5-300{font-size:1.25rem!important;font-weight:300!important}.txt-5-400{font-size:1.25rem!important;font-weight:400!important}.txt-5-500{font-size:1.25rem!important;font-weight:500!important}.txt-5-600{font-size:1.25rem!important;font-weight:600!important}.txt-5-700{font-size:1.25rem!important;font-weight:700!important}.txt-5-800{font-size:1.25rem!important;font-weight:800!important}.txt-5-900{font-size:1.25rem!important;font-weight:900!important}.g-6{gap:1.5rem!important}.m-6{margin:1.5rem!important}.mt-6{margin-top:1.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-6{margin-left:1.5rem!important}.mr-6{margin-right:1.5rem!important}.p-6{padding:1.5rem!important}.pt-6{padding-top:1.5rem!important}.pb-6{padding-bottom:1.5rem!important}.pl-6{padding-left:1.5rem!important}.pr-6{padding-right:1.5rem!important}.txt-6{font-size:1.5rem!important}.txt-6-100{font-size:1.5rem!important;font-weight:100!important}.txt-6-200{font-size:1.5rem!important;font-weight:200!important}.txt-6-300{font-size:1.5rem!important;font-weight:300!important}.txt-6-400{font-size:1.5rem!important;font-weight:400!important}.txt-6-500{font-size:1.5rem!important;font-weight:500!important}.txt-6-600{font-size:1.5rem!important;font-weight:600!important}.txt-6-700{font-size:1.5rem!important;font-weight:700!important}.txt-6-800{font-size:1.5rem!important;font-weight:800!important}.txt-6-900{font-size:1.5rem!important;font-weight:900!important}.g-7{gap:1.75rem!important}.m-7{margin:1.75rem!important}.mt-7{margin-top:1.75rem!important}.mb-7{margin-bottom:1.75rem!important}.ml-7{margin-left:1.75rem!important}.mr-7{margin-right:1.75rem!important}.p-7{padding:1.75rem!important}.pt-7{padding-top:1.75rem!important}.pb-7{padding-bottom:1.75rem!important}.pl-7{padding-left:1.75rem!important}.pr-7{padding-right:1.75rem!important}.txt-7{font-size:1.75rem!important}.txt-7-100{font-size:1.75rem!important;font-weight:100!important}.txt-7-200{font-size:1.75rem!important;font-weight:200!important}.txt-7-300{font-size:1.75rem!important;font-weight:300!important}.txt-7-400{font-size:1.75rem!important;font-weight:400!important}.txt-7-500{font-size:1.75rem!important;font-weight:500!important}.txt-7-600{font-size:1.75rem!important;font-weight:600!important}.txt-7-700{font-size:1.75rem!important;font-weight:700!important}.txt-7-800{font-size:1.75rem!important;font-weight:800!important}.txt-7-900{font-size:1.75rem!important;font-weight:900!important}.g-8{gap:2rem!important}.m-8{margin:2rem!important}.mt-8{margin-top:2rem!important}.mb-8{margin-bottom:2rem!important}.ml-8{margin-left:2rem!important}.mr-8{margin-right:2rem!important}.p-8{padding:2rem!important}.pt-8{padding-top:2rem!important}.pb-8{padding-bottom:2rem!important}.pl-8{padding-left:2rem!important}.pr-8{padding-right:2rem!important}.txt-8{font-size:2rem!important}.txt-8-100{font-size:2rem!important;font-weight:100!important}.txt-8-200{font-size:2rem!important;font-weight:200!important}.txt-8-300{font-size:2rem!important;font-weight:300!important}.txt-8-400{font-size:2rem!important;font-weight:400!important}.txt-8-500{font-size:2rem!important;font-weight:500!important}.txt-8-600{font-size:2rem!important;font-weight:600!important}.txt-8-700{font-size:2rem!important;font-weight:700!important}.txt-8-800{font-size:2rem!important;font-weight:800!important}.txt-8-900{font-size:2rem!important;font-weight:900!important}.g-10{gap:2.5rem!important}.m-10{margin:2.5rem!important}.mt-10{margin-top:2.5rem!important}.mb-10{margin-bottom:2.5rem!important}.ml-10{margin-left:2.5rem!important}.mr-10{margin-right:2.5rem!important}.p-10{padding:2.5rem!important}.pt-10{padding-top:2.5rem!important}.pb-10{padding-bottom:2.5rem!important}.pl-10{padding-left:2.5rem!important}.pr-10{padding-right:2.5rem!important}.txt-10{font-size:2.5rem!important}.txt-10-100{font-size:2.5rem!important;font-weight:100!important}.txt-10-200{font-size:2.5rem!important;font-weight:200!important}.txt-10-300{font-size:2.5rem!important;font-weight:300!important}.txt-10-400{font-size:2.5rem!important;font-weight:400!important}.txt-10-500{font-size:2.5rem!important;font-weight:500!important}.txt-10-600{font-size:2.5rem!important;font-weight:600!important}.txt-10-700{font-size:2.5rem!important;font-weight:700!important}.txt-10-800{font-size:2.5rem!important;font-weight:800!important}.txt-10-900{font-size:2.5rem!important;font-weight:900!important}.g-12{gap:3rem!important}.m-12{margin:3rem!important}.mt-12{margin-top:3rem!important}.mb-12{margin-bottom:3rem!important}.ml-12{margin-left:3rem!important}.mr-12{margin-right:3rem!important}.p-12{padding:3rem!important}.pt-12{padding-top:3rem!important}.pb-12{padding-bottom:3rem!important}.pl-12{padding-left:3rem!important}.pr-12{padding-right:3rem!important}.txt-12{font-size:3rem!important}.txt-12-100{font-size:3rem!important;font-weight:100!important}.txt-12-200{font-size:3rem!important;font-weight:200!important}.txt-12-300{font-size:3rem!important;font-weight:300!important}.txt-12-400{font-size:3rem!important;font-weight:400!important}.txt-12-500{font-size:3rem!important;font-weight:500!important}.txt-12-600{font-size:3rem!important;font-weight:600!important}.txt-12-700{font-size:3rem!important;font-weight:700!important}.txt-12-800{font-size:3rem!important;font-weight:800!important}.txt-12-900{font-size:3rem!important;font-weight:900!important}.g-14{gap:3.5rem!important}.m-14{margin:3.5rem!important}.mt-14{margin-top:3.5rem!important}.mb-14{margin-bottom:3.5rem!important}.ml-14{margin-left:3.5rem!important}.mr-14{margin-right:3.5rem!important}.p-14{padding:3.5rem!important}.pt-14{padding-top:3.5rem!important}.pb-14{padding-bottom:3.5rem!important}.pl-14{padding-left:3.5rem!important}.pr-14{padding-right:3.5rem!important}.txt-14{font-size:3.5rem!important}.txt-14-100{font-size:3.5rem!important;font-weight:100!important}.txt-14-200{font-size:3.5rem!important;font-weight:200!important}.txt-14-300{font-size:3.5rem!important;font-weight:300!important}.txt-14-400{font-size:3.5rem!important;font-weight:400!important}.txt-14-500{font-size:3.5rem!important;font-weight:500!important}.txt-14-600{font-size:3.5rem!important;font-weight:600!important}.txt-14-700{font-size:3.5rem!important;font-weight:700!important}.txt-14-800{font-size:3.5rem!important;font-weight:800!important}.txt-14-900{font-size:3.5rem!important;font-weight:900!important}.g-16{gap:4rem!important}.m-16{margin:4rem!important}.mt-16{margin-top:4rem!important}.mb-16{margin-bottom:4rem!important}.ml-16{margin-left:4rem!important}.mr-16{margin-right:4rem!important}.p-16{padding:4rem!important}.pt-16{padding-top:4rem!important}.pb-16{padding-bottom:4rem!important}.pl-16{padding-left:4rem!important}.pr-16{padding-right:4rem!important}.txt-16{font-size:4rem!important}.txt-16-100{font-size:4rem!important;font-weight:100!important}.txt-16-200{font-size:4rem!important;font-weight:200!important}.txt-16-300{font-size:4rem!important;font-weight:300!important}.txt-16-400{font-size:4rem!important;font-weight:400!important}.txt-16-500{font-size:4rem!important;font-weight:500!important}.txt-16-600{font-size:4rem!important;font-weight:600!important}.txt-16-700{font-size:4rem!important;font-weight:700!important}.txt-16-800{font-size:4rem!important;font-weight:800!important}.txt-16-900{font-size:4rem!important;font-weight:900!important}.g-20{gap:5rem!important}.m-20{margin:5rem!important}.mt-20{margin-top:5rem!important}.mb-20{margin-bottom:5rem!important}.ml-20{margin-left:5rem!important}.mr-20{margin-right:5rem!important}.p-20{padding:5rem!important}.pt-20{padding-top:5rem!important}.pb-20{padding-bottom:5rem!important}.pl-20{padding-left:5rem!important}.pr-20{padding-right:5rem!important}.txt-20{font-size:5rem!important}.txt-20-100{font-size:5rem!important;font-weight:100!important}.txt-20-200{font-size:5rem!important;font-weight:200!important}.txt-20-300{font-size:5rem!important;font-weight:300!important}.txt-20-400{font-size:5rem!important;font-weight:400!important}.txt-20-500{font-size:5rem!important;font-weight:500!important}.txt-20-600{font-size:5rem!important;font-weight:600!important}.txt-20-700{font-size:5rem!important;font-weight:700!important}.txt-20-800{font-size:5rem!important;font-weight:800!important}.txt-20-900{font-size:5rem!important;font-weight:900!important}.g-24{gap:6rem!important}.m-24{margin:6rem!important}.mt-24{margin-top:6rem!important}.mb-24{margin-bottom:6rem!important}.ml-24{margin-left:6rem!important}.mr-24{margin-right:6rem!important}.p-24{padding:6rem!important}.pt-24{padding-top:6rem!important}.pb-24{padding-bottom:6rem!important}.pl-24{padding-left:6rem!important}.pr-24{padding-right:6rem!important}.txt-24{font-size:6rem!important}.txt-24-100{font-size:6rem!important;font-weight:100!important}.txt-24-200{font-size:6rem!important;font-weight:200!important}.txt-24-300{font-size:6rem!important;font-weight:300!important}.txt-24-400{font-size:6rem!important;font-weight:400!important}.txt-24-500{font-size:6rem!important;font-weight:500!important}.txt-24-600{font-size:6rem!important;font-weight:600!important}.txt-24-700{font-size:6rem!important;font-weight:700!important}.txt-24-800{font-size:6rem!important;font-weight:800!important}.txt-24-900{font-size:6rem!important;font-weight:900!important}.g-32{gap:8rem!important}.m-32{margin:8rem!important}.mt-32{margin-top:8rem!important}.mb-32{margin-bottom:8rem!important}.ml-32{margin-left:8rem!important}.mr-32{margin-right:8rem!important}.p-32{padding:8rem!important}.pt-32{padding-top:8rem!important}.pb-32{padding-bottom:8rem!important}.pl-32{padding-left:8rem!important}.pr-32{padding-right:8rem!important}.txt-32{font-size:8rem!important}.txt-32-100{font-size:8rem!important;font-weight:100!important}.txt-32-200{font-size:8rem!important;font-weight:200!important}.txt-32-300{font-size:8rem!important;font-weight:300!important}.txt-32-400{font-size:8rem!important;font-weight:400!important}.txt-32-500{font-size:8rem!important;font-weight:500!important}.txt-32-600{font-size:8rem!important;font-weight:600!important}.txt-32-700{font-size:8rem!important;font-weight:700!important}.txt-32-800{font-size:8rem!important;font-weight:800!important}.txt-32-900{font-size:8rem!important;font-weight:900!important}.g-40{gap:10rem!important}.m-40{margin:10rem!important}.mt-40{margin-top:10rem!important}.mb-40{margin-bottom:10rem!important}.ml-40{margin-left:10rem!important}.mr-40{margin-right:10rem!important}.p-40{padding:10rem!important}.pt-40{padding-top:10rem!important}.pb-40{padding-bottom:10rem!important}.pl-40{padding-left:10rem!important}.pr-40{padding-right:10rem!important}.txt-40{font-size:10rem!important}.txt-40-100{font-size:10rem!important;font-weight:100!important}.txt-40-200{font-size:10rem!important;font-weight:200!important}.txt-40-300{font-size:10rem!important;font-weight:300!important}.txt-40-400{font-size:10rem!important;font-weight:400!important}.txt-40-500{font-size:10rem!important;font-weight:500!important}.txt-40-600{font-size:10rem!important;font-weight:600!important}.txt-40-700{font-size:10rem!important;font-weight:700!important}.txt-40-800{font-size:10rem!important;font-weight:800!important}.txt-40-900{font-size:10rem!important;font-weight:900!important}.g-48{gap:12rem!important}.m-48{margin:12rem!important}.mt-48{margin-top:12rem!important}.mb-48{margin-bottom:12rem!important}.ml-48{margin-left:12rem!important}.mr-48{margin-right:12rem!important}.p-48{padding:12rem!important}.pt-48{padding-top:12rem!important}.pb-48{padding-bottom:12rem!important}.pl-48{padding-left:12rem!important}.pr-48{padding-right:12rem!important}.txt-48{font-size:12rem!important}.txt-48-100{font-size:12rem!important;font-weight:100!important}.txt-48-200{font-size:12rem!important;font-weight:200!important}.txt-48-300{font-size:12rem!important;font-weight:300!important}.txt-48-400{font-size:12rem!important;font-weight:400!important}.txt-48-500{font-size:12rem!important;font-weight:500!important}.txt-48-600{font-size:12rem!important;font-weight:600!important}.txt-48-700{font-size:12rem!important;font-weight:700!important}.txt-48-800{font-size:12rem!important;font-weight:800!important}.txt-48-900{font-size:12rem!important;font-weight:900!important}.g-56{gap:14rem!important}.m-56{margin:14rem!important}.mt-56{margin-top:14rem!important}.mb-56{margin-bottom:14rem!important}.ml-56{margin-left:14rem!important}.mr-56{margin-right:14rem!important}.p-56{padding:14rem!important}.pt-56{padding-top:14rem!important}.pb-56{padding-bottom:14rem!important}.pl-56{padding-left:14rem!important}.pr-56{padding-right:14rem!important}.txt-56{font-size:14rem!important}.txt-56-100{font-size:14rem!important;font-weight:100!important}.txt-56-200{font-size:14rem!important;font-weight:200!important}.txt-56-300{font-size:14rem!important;font-weight:300!important}.txt-56-400{font-size:14rem!important;font-weight:400!important}.txt-56-500{font-size:14rem!important;font-weight:500!important}.txt-56-600{font-size:14rem!important;font-weight:600!important}.txt-56-700{font-size:14rem!important;font-weight:700!important}.txt-56-800{font-size:14rem!important;font-weight:800!important}.txt-56-900{font-size:14rem!important;font-weight:900!important}.g-64{gap:16rem!important}.m-64{margin:16rem!important}.mt-64{margin-top:16rem!important}.mb-64{margin-bottom:16rem!important}.ml-64{margin-left:16rem!important}.mr-64{margin-right:16rem!important}.p-64{padding:16rem!important}.pt-64{padding-top:16rem!important}.pb-64{padding-bottom:16rem!important}.pl-64{padding-left:16rem!important}.pr-64{padding-right:16rem!important}.txt-64{font-size:16rem!important}.txt-64-100{font-size:16rem!important;font-weight:100!important}.txt-64-200{font-size:16rem!important;font-weight:200!important}.txt-64-300{font-size:16rem!important;font-weight:300!important}.txt-64-400{font-size:16rem!important;font-weight:400!important}.txt-64-500{font-size:16rem!important;font-weight:500!important}.txt-64-600{font-size:16rem!important;font-weight:600!important}.txt-64-700{font-size:16rem!important;font-weight:700!important}.txt-64-800{font-size:16rem!important;font-weight:800!important}.txt-64-900{font-size:16rem!important;font-weight:900!important}.fw-100{font-weight:100!important}.fw-200{font-weight:200!important}.fw-300{font-weight:300!important}.fw-400{font-weight:400!important}.fw-500{font-weight:500!important}.fw-600{font-weight:600!important}.fw-700{font-weight:700!important}.fw-800{font-weight:800!important}.fw-900{font-weight:900!important}.cm-shadow-mist{box-shadow:var(--cm-shadow-mist)!important;-webkit-box-shadow:var(--cm-shadow-mist)!important}.cm-shadow-reflex{box-shadow:var(--cm-shadow-reflex)!important;-webkit-box-shadow:var(--cm-shadow-reflex)!important}.cm-checkbox-container[data-v-d47cd0ab]{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .2s}.cm-checkbox-container.disabled[data-v-d47cd0ab]{cursor:not-allowed;opacity:.5}.cm-checkbox-wrapper[data-v-d47cd0ab]{position:relative;width:20px;height:20px}.cm-checkbox-wrapper input[data-v-d47cd0ab]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.cm-checkbox-box[data-v-d47cd0ab]{position:absolute;top:0;left:0;height:20px;width:20px;background:rgba(var(--glass-bg-rgb),.1);border:1px solid rgba(var(--glass-border-rgb),.2);border-radius:6px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.cm-checkbox-box .cm-checkbox-icon[data-v-d47cd0ab]{width:14px;height:14px;color:#fff;stroke-width:3px;transition:transform .2s}.cm-checkbox-wrapper input:checked~.cm-checkbox-box[data-v-d47cd0ab]{background:var(--primary-color);border-color:var(--primary-color);box-shadow:0 0 10px rgba(var(--primary-color-rgb),.3)}.cm-checkbox-container:hover .cm-checkbox-box[data-v-d47cd0ab]{border-color:rgba(var(--glass-border-rgb),.4);background:rgba(var(--glass-bg-rgb),.2)}.cm-checkbox-label[data-v-d47cd0ab]{font-size:.9rem;color:var(--text-color);opacity:.8}.cm-glass-filters[data-v-52af4cfb]{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "glass-studio-ui-pro",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "files": [
     "dist",
     "media",
-    "styles.d.ts"
+    "styles.d.ts",
+    "src/lib/styles"
   ],
   "main": "./dist/liquid-glass-ui.umd.js",
   "module": "./dist/liquid-glass-ui.es.js",
@@ -18,7 +19,8 @@
       "require": "./dist/liquid-glass-ui.umd.js"
     },
     "./styles": "./dist/style.css",
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./scss": "./src/lib/styles/main.scss"
   },
   "typesVersions": {
     "*": {

package/src/lib/styles/_mixins.scss

@@ -0,0 +1,171 @@
+@use "sass:color";
+@use "variables" as vars;
+
+// Color Palette Variables (Only outputs --name: val)
+@mixin create-color-vars {
+  $base-colors: (
+    "red": vars.$red, "orange": vars.$orange, "yellow": vars.$yellow, "green": vars.$green, "mint": vars.$mint, 
+    "cyan": vars.$cyan, "blue": vars.$blue, "brand": vars.$brand, "indigo": vars.$indigo, "purple": vars.$purple, "gray": vars.$gray
+  );
+
+  // Theme Variables (Light Mode)
+  @each $var, $val in vars.$light-theme-vars {
+    #{$var}: #{$val};
+  }
+
+  // Generative CSS Variables (50-900)
+  @each $name, $color in $base-colors {
+    --#{$name}-50: #{color.mix(white, $color, 95%)};
+    --#{$name}-100: #{color.mix(white, $color, 85%)};
+    --#{$name}-200: #{color.mix(white, $color, 70%)};
+    --#{$name}-300: #{color.mix(white, $color, 50%)};
+    --#{$name}-400: #{color.mix(white, $color, 25%)};
+    --#{$name}-500: #{$color};
+    --#{$name}-600: #{color.mix(black, $color, 15%)};
+    --#{$name}-700: #{color.mix(black, $color, 35%)};
+    --#{$name}-800: #{color.mix(black, $color, 55%)};
+    --#{$name}-900: #{color.mix(black, $color, 75%)};
+  }
+
+  // Basic Colors
+  --white: #{vars.$white};
+  --black: #{vars.$black};
+}
+
+// Color Utility Classes (bg-, txt-, border-)
+@mixin create-color-utilities {
+  $base-colors: (
+    "red": vars.$red, "orange": vars.$orange, "yellow": vars.$yellow, "green": vars.$green, "mint": vars.$mint, 
+    "cyan": vars.$cyan, "blue": vars.$blue, "brand": vars.$brand, "indigo": vars.$indigo, "purple": vars.$purple, "gray": vars.$gray
+  );
+
+  @each $name, $color in $base-colors {
+    @for $i from 1 through 9 {
+      $weight: $i * 100;
+      .bg-#{$name}-#{$weight} { background-color: var(--#{$name}-#{$weight}) !important; }
+      .txt-#{$name}-#{$weight} { color: var(--#{$name}-#{$weight}) !important; }
+      .border-#{$name}-#{$weight} { border-color: var(--#{$name}-#{$weight}) !important; }
+    }
+    
+    // Weight 50
+    .bg-#{$name}-50 { background-color: var(--#{$name}-50) !important; }
+    .txt-#{$name}-50 { color: var(--#{$name}-50) !important; }
+    .border-#{$name}-50 { border-color: var(--#{$name}-50) !important; }
+  }
+
+  // Basic color utilities
+  .bg-white { background-color: var(--white) !important; }
+  .bg-black { background-color: var(--black) !important; }
+  .txt-white { color: var(--white) !important; }
+  .txt-black { color: var(--black) !important; }
+  .bg-transparent { background-color: transparent !important; }
+}
+
+
+@mixin glass-effect($blur: 10px, $bg-opacity: 0.2, $border-opacity: 0.1, $shadow: true) {
+  background: rgba(var(--glass-bg-rgb), $bg-opacity);
+  backdrop-filter: blur($blur);
+  -webkit-backdrop-filter: blur($blur);
+  border: 1px solid rgba(var(--glass-border-rgb), $border-opacity);
+  
+  @if $shadow {
+    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  // Liquid Highlight
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.1) 0%,
+      transparent 50%,
+      rgba(0, 0, 0, 0.05) 100%
+    );
+    z-index: -1;
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin mobile {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: 769px) and (max-width: 1024px) {
+    @content;
+  }
+}
+
+// Flexbox Utils
+@mixin flex($justify: null, $align: null, $direction: null, $wrap: null) {
+  display: flex;
+  @if $justify { justify-content: $justify; }
+  @if $align { align-items: $align; }
+  @if $direction { flex-direction: $direction; }
+  @if $wrap { flex-wrap: $wrap; }
+}
+
+@mixin j-center { @include flex($justify: center); }
+@mixin j-end { @include flex($justify: flex-end); }
+@mixin j-start { @include flex($justify: flex-start); }
+@mixin j-between { @include flex($justify: space-between); }
+@mixin j-around { @include flex($justify: space-around); }
+
+@mixin a-center { @include flex($align: center); }
+@mixin a-end { @include flex($align: flex-end); }
+@mixin a-start { @include flex($align: flex-start); }
+
+@mixin j-a-center { @include flex($justify: center, $align: center); }
+
+@mixin flex-col { @include flex($direction: column); }
+@mixin flex-row { @include flex($direction: row); }
+
+// Sizing Utilities Generator
+@mixin create-sizing-utils {
+  @each $n in vars.$sizes {
+    // Gap
+    .g-#{$n} { gap: ($n * vars.$base-unit) !important; }
+    
+    // Margin & Padding
+    .m-#{$n} { margin: ($n * vars.$base-unit) !important; }
+    .mt-#{$n} { margin-top: ($n * vars.$base-unit) !important; }
+    .mb-#{$n} { margin-bottom: ($n * vars.$base-unit) !important; }
+    .ml-#{$n} { margin-left: ($n * vars.$base-unit) !important; }
+    .mr-#{$n} { margin-right: ($n * vars.$base-unit) !important; }
+
+    .p-#{$n} { padding: ($n * vars.$base-unit) !important; }
+    .pt-#{$n} { padding-top: ($n * vars.$base-unit) !important; }
+    .pb-#{$n} { padding-bottom: ($n * vars.$base-unit) !important; }
+    .pl-#{$n} { padding-left: ($n * vars.$base-unit) !important; }
+    .pr-#{$n} { padding-right: ($n * vars.$base-unit) !important; }
+
+    // Font Size alone
+    .txt-#{$n} { font-size: ($n * vars.$base-unit) !important; }
+
+    // Combined Size + Weight utility
+    @each $w in vars.$weights {
+      .txt-#{$n}-#{$w} {
+        font-size: ($n * vars.$base-unit) !important;
+        font-weight: $w !important;
+      }
+    }
+  }
+
+  // Weight only 
+  @each $w in vars.$weights {
+    .fw-#{$w} { font-weight: $w !important; }
+  }
+}

package/src/lib/styles/_themes.scss

@@ -0,0 +1,56 @@
+// _themes.scss
+[data-theme='dark'],
+.dark-mode {
+  --glass-bg-rgb: 17, 24, 39;
+  --glass-border-rgb: 255, 255, 255;
+  --text-color: #f9fafb;
+  --bg-color: #0b0f1a;
+  --primary-color: #818cf8;
+  --primary-color-rgb: 129, 140, 248;
+  --surface-color: rgba(17, 24, 39, 0.6);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+}
+
+// Global Classes
+.bg-liquid-glass {
+  background-image: url(https://essential-addons.com/wp-content/uploads/2025/08/tropical-leaves-blue-yellow-jungle-foliage-artwork-3.webp);  
+  height: 100vh;
+  overflow: auto;
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
+  
+  // Dynamic Background Elements for better glass perspective
+  &::before,
+  &::after {
+    content: '';
+    position: fixed;
+    border-radius: 50%;
+    filter: blur(80px);
+    z-index: -2;
+    opacity: 0.6;
+    animation: flow 20s infinite alternate linear;
+  }
+
+  &::before {
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
+    top: -50px;
+    right: -50px;
+  }
+
+  &::after {
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, #ec4899 0%, transparent 70%);
+    bottom: -100px;
+    left: -100px;
+    animation-delay: -10s;
+  }
+}
+
+@keyframes flow {
+  0% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(100px, 50px) scale(1.2); }
+  100% { transform: translate(-50px, 100px) scale(0.8); }
+}

package/src/lib/styles/_variables.scss

@@ -0,0 +1,70 @@
+// Color System
+$red: #ef4444;
+$orange: #f97316;
+$yellow: #ffc107;
+$green: #22c55e;
+$mint: #10b981;
+$cyan: #06b6d4;
+$blue: #3b82f6;
+$brand: #1a4085;
+$indigo: #6366f1;
+$purple: #a855f7;
+
+$white: #ffffff !default;
+$gray: #6b7280 !default;
+$black: #111111 !default;
+
+// Theme Mapping
+$primary-color: $indigo;
+$secondary-color: $purple;
+$accent-color: $mint;
+
+$light-theme-vars: (
+  "--glass-bg-rgb": "255, 255, 255",
+  "--glass-border-rgb": "255, 255, 255",
+  "--text-color": "#1a1a2e",
+  "--bg-color": "#f0f2f5",
+  "--primary-color": "#6366f1",
+  "--primary-color-rgb": "99, 102, 241",
+  "--surface-color": "rgba(255, 255, 255, 0.4)",
+  "--glass-shadow": "0 8px 32px 0 rgba(31, 38, 135, 0.07)"
+);
+
+// Liquid Glass Properties
+$glass-blur: 15px;
+$glass-border: 1px solid rgba(255, 255, 255, 0.1);
+$glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+
+// Light Mode Defaults
+$light-background: rgba(255, 255, 255, 0.4);
+$light-border: rgba(255, 255, 255, 0.18);
+$light-text: #1f2937;
+
+// Dark Mode Defaults
+$dark-background: rgba(17, 24, 39, 0.6);
+$dark-border: rgba(255, 255, 255, 0.1);
+$dark-text: #f9fafb;
+
+// Transitions
+$base-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+// Typography
+$font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+$base-unit: calc(1rem / 4); // 4px based on 16px base
+
+$sizes: (1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 56, 64);
+$weights: (100, 200, 300, 400, 500, 600, 700, 800, 900);
+
+$font-weights: (
+  "100": 100,
+  "200": 200,
+  "300": 300,
+  "400": 400,
+  "500": 500,
+  "600": 600,
+  "700": 700,
+  "800": 800,
+  "900": 900
+);
+

package/src/lib/styles/components/_button.scss

@@ -0,0 +1,62 @@
+// _button.scss
+.cm-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid rgba(var(--glass-border-rgb), 0.15);
+  color: var(--text-color);
+  font-family: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
+    z-index: 1;
+  }
+
+  &-content {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: rgba(var(--glass-border-rgb), 0.3);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+    background: rgba(var(--glass-bg-rgb), 0.2) !important;
+  }
+
+  &:active, &-active {
+    transform: translateY(0) scale(0.96);
+    background: rgba(var(--glass-bg-rgb), 0.3) !important;
+  }
+
+  &-primary {
+    border: 1px solid var(--primary-color);
+    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.3), rgba(var(--primary-color-rgb), 0.1));
+    color: var(--primary-color);
+    
+    &:hover {
+      background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.4), rgba(var(--primary-color-rgb), 0.2)) !important;
+    }
+  }
+
+  &-glow {
+    box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.3);
+    &:hover {
+       box-shadow: 0 0 30px rgba(var(--primary-color-rgb), 0.5);
+    }
+  }
+}

package/src/lib/styles/components/_card.scss

@@ -0,0 +1,31 @@
+// _card.scss
+.cm-card {
+  position: relative;
+  overflow: hidden; // Keep distortion inside the card bounds
+  transition: all 0.3s ease;
+  padding: 1.5rem;
+  border: 1px solid rgba(var(--glass-border-rgb), 0.1);
+  box-shadow: var(--glass-shadow);
+  
+  // Enhancement for better glass feel
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    pointer-events: none;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
+    z-index: -1;
+  }
+}
+
+.cm-card-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+}
+
+.cm-card-footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  margin-top: 1rem;
+  padding-top: 0.5rem;
+}

package/src/lib/styles/main.scss

@@ -0,0 +1,129 @@
+@use "variables" as vars;
+@use "mixins";
+@use "themes";
+
+// Components
+@use "components/button";
+@use "components/card";
+
+// Global Variable & Utility Initialization
+:root {
+  --c-light: #fff;
+  --c-dark: #000;
+  --glass-reflex-dark: 2;
+  --glass-reflex-light: 2;
+  
+  // Shadow Variables
+  --cm-shadow-mist: 0px 19px 26px 0px rgba(0, 0, 0, 0.2);
+  --cm-shadow-reflex: 
+    inset 0 0 0 2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
+    inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
+    inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
+    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
+    inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
+    inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
+    0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
+
+  @include mixins.create-color-vars;
+}
+
+@include mixins.create-color-utilities;
+// Atomic CM View Classes
+.cm-container {
+  @include mixins.glass-effect(20px, 0.25, 0.15);
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+  transition: vars.$base-transition;
+}
+
+// Legacy classes (kept for backward compatibility or direct HTML usage)
+.cm-card-legacy {
+  @include mixins.glass-effect(15px, 0.1, 0.12);
+  border-radius: 16px;
+  padding: 1.5rem;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.125);
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15);
+    background: rgba(var(--glass-bg-rgb), 0.18);
+  }
+}
+
+.cm-btn-legacy {
+  @include mixins.glass-effect(8px, 0.15, 0.1, false);
+  border-radius: 10px;
+  padding: 0.6rem 1.25rem;
+  color: var(--text-color);
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  background: rgba(var(--glass-bg-rgb), 0.12);
+  transition: vars.$base-transition;
+
+  &:hover {
+    background: rgba(var(--glass-bg-rgb), 0.25);
+    transform: scale(1.02);
+  }
+}
+
+
+.cm-gradient-text {
+  background: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+}
+
+// Grain Effect
+.cm-grain {
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0.04;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  }
+}
+
+// Flex Utilities
+.flex { display: flex !important; }
+.col, .flex-column { display: flex; flex-direction: column !important; }
+.row, .flex-row { display: flex; flex-direction: row !important; }
+.wrap { flex-wrap: wrap !important; }
+
+.j-center { justify-content: center !important; }
+.j-end { justify-content: flex-end !important; }
+.j-start { justify-content: flex-start !important; }
+.j-between { justify-content: space-between !important; }
+.j-around { justify-content: space-around !important; }
+
+.a-center { align-items: center !important; }
+.a-end { align-items: flex-end !important; }
+.a-start { align-items: flex-start !important; }
+
+.j-a-center { 
+  display: flex !important;
+  justify-content: center !important; 
+  align-items: center !important; 
+}
+
+
+@include mixins.create-sizing-utils;
+
+// Shadow Utilities
+.cm-shadow-mist {
+  box-shadow: var(--cm-shadow-mist) !important;
+  -webkit-box-shadow: var(--cm-shadow-mist) !important;
+}
+
+.cm-shadow-reflex {
+  box-shadow: var(--cm-shadow-reflex) !important;
+  -webkit-box-shadow: var(--cm-shadow-reflex) !important;
+}