@yesilyazilim/web.spa 1.1.0 → 1.1.3

package/index.css

@@ -1,277 +1,248 @@
 :root {
-  --red: #f44336;
-  --red-50: #ffebee;
-  --red-100: #ffcdd2;
-  --red-200: #ef9a9a;
-  --red-300: #e57373;
-  --red-400: #ef5350;
-  --red-500: var(--red);
-  --red-600: #e53935;
-  --red-700: #d32f2f;
-  --red-800: #c62828;
-  --red-900: #b71c1c;
-  --red-a100: #ff8a80;
-  --red-a200: #ff5252;
-  --red-a400: #ff1744;
-  --red-a700: #d50000;
-  --pink: #e91e63;
-  --pink-50: #fce4ec;
-  --pink-100: #f8bbd0;
-  --pink-200: #f48fb1;
-  --pink-300: #f06292;
-  --pink-400: #ec407a;
-  --pink-500: var(--pink);
-  --pink-600: #d81b60;
-  --pink-700: #c2185b;
-  --pink-800: #ad1457;
-  --pink-900: #880e4f;
-  --pink-a100: #ff80ab;
-  --pink-a200: #ff4081;
-  --pink-a400: #f50057;
-  --pink-a700: #c51162;
-  --purple: #9c27b0;
-  --purple-50: #f3e5f5;
-  --purple-100: #e1bee7;
-  --purple-200: #ce93d8;
-  --purple-300: #ba68c8;
-  --purple-400: #ab47bc;
-  --purple-500: var(--purple);
-  --purple-600: #8e24aa;
-  --purple-700: #7b1fa2;
-  --purple-800: #6a1b9a;
-  --purple-900: #4a148c;
-  --purple-a100: #ea80fc;
-  --purple-a200: #e040fb;
-  --purple-a400: #d500f9;
-  --purple-a700: #a0f;
-  --deep-purple: #673ab7;
-  --deep-purple-50: #ede7f6;
-  --deep-purple-100: #d1c4e9;
-  --deep-purple-200: #b39ddb;
-  --deep-purple-300: #9575cd;
-  --deep-purple-400: #7e57c2;
-  --deep-purple-500: var(--deep-purple);
-  --deep-purple-600: #5e35b1;
-  --deep-purple-700: #512da8;
-  --deep-purple-800: #4527a0;
-  --deep-purple-900: #311b92;
-  --deep-purple-a100: #b388ff;
-  --deep-purple-a200: #7c4dff;
-  --deep-purple-a400: #651fff;
-  --deep-purple-a700: #6200ea;
-  --indigo: #3f51b5;
-  --indigo-50: #e8eaf6;
-  --indigo-100: #c5cae9;
-  --indigo-200: #9fa8da;
-  --indigo-300: #7986cb;
-  --indigo-400: #5c6bc0;
-  --indigo-500: var(--indigo);
-  --indigo-600: #3949ab;
-  --indigo-700: #303f9f;
-  --indigo-800: #283593;
-  --indigo-900: #1a237e;
-  --indigo-a100: #8c9eff;
-  --indigo-a200: #536dfe;
-  --indigo-a400: #3d5afe;
-  --indigo-a700: #304ffe;
-  --blue: #2196f3;
-  --blue-50: #e3f2fd;
-  --blue-100: #bbdefb;
-  --blue-200: #90caf9;
-  --blue-300: #64b5f6;
-  --blue-400: #42a5f5;
-  --blue-500: var(--blue);
-  --blue-600: #1e88e5;
-  --blue-700: #1976d2;
-  --blue-800: #1565c0;
-  --blue-900: #0d47a1;
-  --blue-a100: #82b1ff;
-  --blue-a200: #448aff;
-  --blue-a400: #2979ff;
-  --blue-a700: #2962ff;
-  --light-blue: #03a9f4;
-  --light-blue-50: #e1f5fe;
-  --light-blue-100: #b3e5fc;
-  --light-blue-200: #81d4fa;
-  --light-blue-300: #4fc3f7;
-  --light-blue-400: #29b6f6;
-  --light-blue-500: var(--light-blue);
-  --light-blue-600: #039be5;
-  --light-blue-700: #0288d1;
-  --light-blue-800: #0277bd;
-  --light-blue-900: #01579b;
-  --light-blue-a100: #80d8ff;
-  --light-blue-a200: #40c4ff;
-  --light-blue-a400: #00b0ff;
-  --light-blue-a700: #0091ea;
-  --cyan: #00bcd4;
-  --cyan-50: #e0f7fa;
-  --cyan-100: #b2ebf2;
-  --cyan-200: #80deea;
-  --cyan-300: #4dd0e1;
-  --cyan-400: #26c6da;
-  --cyan-500: var(--cyan);
-  --cyan-600: #00acc1;
-  --cyan-700: #0097a7;
-  --cyan-800: #00838f;
-  --cyan-900: #006064;
-  --cyan-a100: #84ffff;
-  --cyan-a200: #18ffff;
-  --cyan-a400: #00e5ff;
-  --cyan-a700: #00b8d4;
-  --teal: #009688;
-  --teal-50: #e0f2f1;
-  --teal-100: #b2dfdb;
-  --teal-200: #80cbc4;
-  --teal-300: #4db6ac;
-  --teal-400: #26a69a;
-  --teal-500: var(--teal);
-  --teal-600: #00897b;
-  --teal-700: #00796b;
-  --teal-800: #00695c;
-  --teal-900: #004d40;
-  --teal-a100: #a7ffeb;
-  --teal-a200: #64ffda;
-  --teal-a400: #1de9b6;
-  --teal-a700: #00bfa5;
-  --green: #4caf50;
-  --green-50: #e8f5e9;
-  --green-100: #c8e6c9;
-  --green-200: #a5d6a7;
-  --green-300: #81c784;
-  --green-400: #66bb6a;
-  --green-500: var(--green);
-  --green-600: #43a047;
-  --green-700: #388e3c;
-  --green-800: #2e7d32;
-  --green-900: #1b5e20;
-  --green-a100: #b9f6ca;
-  --green-a200: #69f0ae;
-  --green-a400: #00e676;
-  --green-a700: #00c853;
-  --light-green: #8bc34a;
-  --light-green-50: #f1f8e9;
-  --light-green-100: #dcedc8;
-  --light-green-200: #c5e1a5;
-  --light-green-300: #aed581;
-  --light-green-400: #9ccc65;
-  --light-green-500: var(--light-green);
-  --light-green-600: #7cb342;
-  --light-green-700: #689f38;
-  --light-green-800: #558b2f;
-  --light-green-900: #33691e;
-  --light-green-a100: #ccff90;
-  --light-green-a200: #b2ff59;
-  --light-green-a400: #76ff03;
-  --light-green-a700: #64dd17;
-  --lime: #cddc39;
-  --lime-50: #f9fbe7;
-  --lime-100: #f0f4c3;
-  --lime-200: #e6ee9c;
-  --lime-300: #dce775;
-  --lime-400: #d4e157;
-  --lime-500: var(--lime);
-  --lime-600: #c0ca33;
-  --lime-700: #afb42b;
-  --lime-800: #9e9d24;
-  --lime-900: #827717;
-  --lime-a100: #f4ff81;
-  --lime-a200: #eeff41;
-  --lime-a400: #c6ff00;
-  --lime-a700: #aeea00;
-  --yellow: #ffeb3b;
-  --yellow-50: #fffde7;
-  --yellow-100: #fff9c4;
-  --yellow-200: #fff59d;
-  --yellow-300: #fff176;
-  --yellow-400: #ffee58;
-  --yellow-500: var(--yellow);
-  --yellow-600: #fdd835;
-  --yellow-700: #fbc02d;
-  --yellow-800: #f9a825;
-  --yellow-900: #f57f17;
-  --yellow-a100: #ffff8d;
-  --yellow-a200: #ff0;
-  --yellow-a400: #ffea00;
-  --yellow-a700: #ffd600;
-  --amber: #ffc107;
-  --amber-50: #fff8e1;
-  --amber-100: #ffecb3;
-  --amber-200: #ffe082;
-  --amber-300: #ffd54f;
-  --amber-400: #ffca28;
-  --amber-500: var(--amber);
-  --amber-600: #ffb300;
-  --amber-700: #ffa000;
-  --amber-800: #ff8f00;
-  --amber-900: #ff6f00;
-  --amber-a100: #ffe57f;
-  --amber-a200: #ffd740;
-  --amber-a400: #ffc400;
-  --amber-a700: #ffab00;
-  --orange: #ff9800;
-  --orange-50: #fff3e0;
-  --orange-100: #ffe0b2;
-  --orange-200: #ffcc80;
-  --orange-300: #ffb74d;
-  --orange-400: #ffa726;
-  --orange-500: var(--orange);
-  --orange-600: #fb8c00;
-  --orange-700: #f57c00;
-  --orange-800: #ef6c00;
-  --orange-900: #e65100;
-  --orange-a100: #ffd180;
-  --orange-a200: #ffab40;
-  --orange-a400: #ff9100;
-  --orange-a700: #ff6d00;
-  --deep-orange: #ff5722;
-  --deep-orange-50: #fbe9e7;
-  --deep-orange-100: #ffccbc;
-  --deep-orange-200: #ffab91;
-  --deep-orange-300: #ff8a65;
-  --deep-orange-400: #ff7043;
-  --deep-orange-500: var(--deep-orange);
-  --deep-orange-600: #f4511e;
-  --deep-orange-700: #e64a19;
-  --deep-orange-800: #d84315;
-  --deep-orange-900: #bf360c;
-  --deep-orange-a100: #ff9e80;
-  --deep-orange-a200: #ff6e40;
-  --deep-orange-a400: #ff3d00;
-  --deep-orange-a700: #dd2c00;
-  --brown: #795548;
-  --brown-50: #efebe9;
-  --brown-100: #d7ccc8;
-  --brown-200: #bcaaa4;
-  --brown-300: #a1887f;
-  --brown-400: #8d6e63;
-  --brown-500: var(--brown);
-  --brown-600: #6d4c41;
-  --brown-700: #5d4037;
-  --brown-800: #4e342e;
-  --brown-900: #3e2723;
-  --grey: #9e9e9e;
-  --grey-50: #fafafa;
-  --grey-100: #f5f5f5;
-  --grey-200: #eee;
-  --grey-300: #e0e0e0;
-  --grey-400: #bdbdbd;
-  --grey-500: var(--grey);
-  --grey-600: #757575;
-  --grey-700: #616161;
-  --grey-800: #424242;
-  --grey-900: #212121;
-  --blue-grey: #607d8b;
-  --blue-grey-50: #eceff1;
-  --blue-grey-100: #cfd8dc;
-  --blue-grey-200: #b0bec5;
-  --blue-grey-300: #90a4ae;
-  --blue-grey-400: #78909c;
-  --blue-grey-500: var(--blue-grey);
-  --blue-grey-600: #546e7a;
-  --blue-grey-700: #455a64;
-  --blue-grey-800: #37474f;
-  --blue-grey-900: #263238;
+  --black: #000;
+  --white: #fff;
+  --red-50: oklch(97.1% .013 17.38);
+  --red-100: oklch(93.6% .032 17.717);
+  --red-200: oklch(88.5% .062 18.334);
+  --red-300: oklch(80.8% .114 19.571);
+  --red-400: oklch(70.4% .191 22.216);
+  --red-500: oklch(63.7% .237 25.331);
+  --red-600: oklch(57.7% .245 27.325);
+  --red-700: oklch(50.5% .213 27.518);
+  --red-800: oklch(44.4% .177 26.899);
+  --red-900: oklch(39.6% .141 25.723);
+  --red-950: oklch(25.8% .092 26.042);
+  --orange-50: oklch(98% .016 73.684);
+  --orange-100: oklch(95.4% .038 75.164);
+  --orange-200: oklch(90.1% .076 70.697);
+  --orange-300: oklch(83.7% .128 66.29);
+  --orange-400: oklch(75% .183 55.934);
+  --orange-500: oklch(70.5% .213 47.604);
+  --orange-600: oklch(64.6% .222 41.116);
+  --orange-700: oklch(55.3% .195 38.402);
+  --orange-800: oklch(47% .157 37.304);
+  --orange-900: oklch(40.8% .123 38.172);
+  --orange-950: oklch(26.6% .079 36.259);
+  --amber-50: oklch(98.7% .022 95.277);
+  --amber-100: oklch(96.2% .059 95.617);
+  --amber-200: oklch(92.4% .12 95.746);
+  --amber-300: oklch(87.9% .169 91.605);
+  --amber-400: oklch(82.8% .189 84.429);
+  --amber-500: oklch(76.9% .188 70.08);
+  --amber-600: oklch(66.6% .179 58.318);
+  --amber-700: oklch(55.5% .163 48.998);
+  --amber-800: oklch(47.3% .137 46.201);
+  --amber-900: oklch(41.4% .112 45.904);
+  --amber-950: oklch(27.9% .077 45.635);
+  --yellow-50: oklch(98.7% .026 102.212);
+  --yellow-100: oklch(97.3% .071 103.193);
+  --yellow-200: oklch(94.5% .129 101.54);
+  --yellow-300: oklch(90.5% .182 98.111);
+  --yellow-400: oklch(85.2% .199 91.936);
+  --yellow-500: oklch(79.5% .184 86.047);
+  --yellow-600: oklch(68.1% .162 75.834);
+  --yellow-700: oklch(55.4% .135 66.442);
+  --yellow-800: oklch(47.6% .114 61.907);
+  --yellow-900: oklch(42.1% .095 57.708);
+  --yellow-950: oklch(28.6% .066 53.813);
+  --lime-50: oklch(98.6% .031 120.757);
+  --lime-100: oklch(96.7% .067 122.328);
+  --lime-200: oklch(93.8% .127 124.321);
+  --lime-300: oklch(89.7% .196 126.665);
+  --lime-400: oklch(84.1% .238 128.85);
+  --lime-500: oklch(76.8% .233 130.85);
+  --lime-600: oklch(64.8% .2 131.684);
+  --lime-700: oklch(53.2% .157 131.589);
+  --lime-800: oklch(45.3% .124 130.933);
+  --lime-900: oklch(40.5% .101 131.063);
+  --lime-950: oklch(27.4% .072 132.109);
+  --green-50: oklch(98.2% .018 155.826);
+  --green-100: oklch(96.2% .044 156.743);
+  --green-200: oklch(92.5% .084 155.995);
+  --green-300: oklch(87.1% .15 154.449);
+  --green-400: oklch(79.2% .209 151.711);
+  --green-500: oklch(72.3% .219 149.579);
+  --green-600: oklch(62.7% .194 149.214);
+  --green-700: oklch(52.7% .154 150.069);
+  --green-800: oklch(44.8% .119 151.328);
+  --green-900: oklch(39.3% .095 152.535);
+  --green-950: oklch(26.6% .065 152.934);
+  --emerald-50: oklch(97.9% .021 166.113);
+  --emerald-100: oklch(95% .052 163.051);
+  --emerald-200: oklch(90.5% .093 164.15);
+  --emerald-300: oklch(84.5% .143 164.978);
+  --emerald-400: oklch(76.5% .177 163.223);
+  --emerald-500: oklch(69.6% .17 162.48);
+  --emerald-600: oklch(59.6% .145 163.225);
+  --emerald-700: oklch(50.8% .118 165.612);
+  --emerald-800: oklch(43.2% .095 166.913);
+  --emerald-900: oklch(37.8% .077 168.94);
+  --emerald-950: oklch(26.2% .051 172.552);
+  --teal-50: oklch(98.4% .014 180.72);
+  --teal-100: oklch(95.3% .051 180.801);
+  --teal-200: oklch(91% .096 180.426);
+  --teal-300: oklch(85.5% .138 181.071);
+  --teal-400: oklch(77.7% .152 181.912);
+  --teal-500: oklch(70.4% .14 182.503);
+  --teal-600: oklch(60% .118 184.704);
+  --teal-700: oklch(51.1% .096 186.391);
+  --teal-800: oklch(43.7% .078 188.216);
+  --teal-900: oklch(38.6% .063 188.416);
+  --teal-950: oklch(27.7% .046 192.524);
+  --cyan-50: oklch(98.4% .019 200.873);
+  --cyan-100: oklch(95.6% .045 203.388);
+  --cyan-200: oklch(91.7% .08 205.041);
+  --cyan-300: oklch(86.5% .127 207.078);
+  --cyan-400: oklch(78.9% .154 211.53);
+  --cyan-500: oklch(71.5% .143 215.221);
+  --cyan-600: oklch(60.9% .126 221.723);
+  --cyan-700: oklch(52% .105 223.128);
+  --cyan-800: oklch(45% .085 224.283);
+  --cyan-900: oklch(39.8% .07 227.392);
+  --cyan-950: oklch(30.2% .056 229.695);
+  --sky-50: oklch(97.7% .013 236.62);
+  --sky-100: oklch(95.1% .026 236.824);
+  --sky-200: oklch(90.1% .058 230.902);
+  --sky-300: oklch(82.8% .111 230.318);
+  --sky-400: oklch(74.6% .16 232.661);
+  --sky-500: oklch(68.5% .169 237.323);
+  --sky-600: oklch(58.8% .158 241.966);
+  --sky-700: oklch(50% .134 242.749);
+  --sky-800: oklch(44.3% .11 240.79);
+  --sky-900: oklch(39.1% .09 240.876);
+  --sky-950: oklch(29.3% .066 243.157);
+  --blue-50: oklch(97% .014 254.604);
+  --blue-100: oklch(93.2% .032 255.585);
+  --blue-200: oklch(88.2% .059 254.128);
+  --blue-300: oklch(80.9% .105 251.813);
+  --blue-400: oklch(70.7% .165 254.624);
+  --blue-500: oklch(62.3% .214 259.815);
+  --blue-600: oklch(54.6% .245 262.881);
+  --blue-700: oklch(48.8% .243 264.376);
+  --blue-800: oklch(42.4% .199 265.638);
+  --blue-900: oklch(37.9% .146 265.522);
+  --blue-950: oklch(28.2% .091 267.935);
+  --indigo-50: oklch(96.2% .018 272.314);
+  --indigo-100: oklch(93% .034 272.788);
+  --indigo-200: oklch(87% .065 274.039);
+  --indigo-300: oklch(78.5% .115 274.713);
+  --indigo-400: oklch(67.3% .182 276.935);
+  --indigo-500: oklch(58.5% .233 277.117);
+  --indigo-600: oklch(51.1% .262 276.966);
+  --indigo-700: oklch(45.7% .24 277.023);
+  --indigo-800: oklch(39.8% .195 277.366);
+  --indigo-900: oklch(35.9% .144 278.697);
+  --indigo-950: oklch(25.7% .09 281.288);
+  --violet-50: oklch(96.9% .016 293.756);
+  --violet-100: oklch(94.3% .029 294.588);
+  --violet-200: oklch(89.4% .057 293.283);
+  --violet-300: oklch(81.1% .111 293.571);
+  --violet-400: oklch(70.2% .183 293.541);
+  --violet-500: oklch(60.6% .25 292.717);
+  --violet-600: oklch(54.1% .281 293.009);
+  --violet-700: oklch(49.1% .27 292.581);
+  --violet-800: oklch(43.2% .232 292.759);
+  --violet-900: oklch(38% .189 293.745);
+  --violet-950: oklch(28.3% .141 291.089);
+  --purple-50: oklch(97.7% .014 308.299);
+  --purple-100: oklch(94.6% .033 307.174);
+  --purple-200: oklch(90.2% .063 306.703);
+  --purple-300: oklch(82.7% .119 306.383);
+  --purple-400: oklch(71.4% .203 305.504);
+  --purple-500: oklch(62.7% .265 303.9);
+  --purple-600: oklch(55.8% .288 302.321);
+  --purple-700: oklch(49.6% .265 301.924);
+  --purple-800: oklch(43.8% .218 303.724);
+  --purple-900: oklch(38.1% .176 304.987);
+  --purple-950: oklch(29.1% .149 302.717);
+  --fuchsia-50: oklch(97.7% .017 320.058);
+  --fuchsia-100: oklch(95.2% .037 318.852);
+  --fuchsia-200: oklch(90.3% .076 319.62);
+  --fuchsia-300: oklch(83.3% .145 321.434);
+  --fuchsia-400: oklch(74% .238 322.16);
+  --fuchsia-500: oklch(66.7% .295 322.15);
+  --fuchsia-600: oklch(59.1% .293 322.896);
+  --fuchsia-700: oklch(51.8% .253 323.949);
+  --fuchsia-800: oklch(45.2% .211 324.591);
+  --fuchsia-900: oklch(40.1% .17 325.612);
+  --fuchsia-950: oklch(29.3% .136 325.661);
+  --pink-50: oklch(97.1% .014 343.198);
+  --pink-100: oklch(94.8% .028 342.258);
+  --pink-200: oklch(89.9% .061 343.231);
+  --pink-300: oklch(82.3% .12 346.018);
+  --pink-400: oklch(71.8% .202 349.761);
+  --pink-500: oklch(65.6% .241 354.308);
+  --pink-600: oklch(59.2% .249 .584);
+  --pink-700: oklch(52.5% .223 3.958);
+  --pink-800: oklch(45.9% .187 3.815);
+  --pink-900: oklch(40.8% .153 2.432);
+  --pink-950: oklch(28.4% .109 3.907);
+  --rose-50: oklch(96.9% .015 12.422);
+  --rose-100: oklch(94.1% .03 12.58);
+  --rose-200: oklch(89.2% .058 10.001);
+  --rose-300: oklch(81% .117 11.638);
+  --rose-400: oklch(71.2% .194 13.428);
+  --rose-500: oklch(64.5% .246 16.439);
+  --rose-600: oklch(58.6% .253 17.585);
+  --rose-700: oklch(51.4% .222 16.935);
+  --rose-800: oklch(45.5% .188 13.697);
+  --rose-900: oklch(41% .159 10.272);
+  --rose-950: oklch(27.1% .105 12.094);
+  --slate-50: oklch(98.4% .003 247.858);
+  --slate-100: oklch(96.8% .007 247.896);
+  --slate-200: oklch(92.9% .013 255.508);
+  --slate-300: oklch(86.9% .022 252.894);
+  --slate-400: oklch(70.4% .04 256.788);
+  --slate-500: oklch(55.4% .046 257.417);
+  --slate-600: oklch(44.6% .043 257.281);
+  --slate-700: oklch(37.2% .044 257.287);
+  --slate-800: oklch(27.9% .041 260.031);
+  --slate-900: oklch(20.8% .042 265.755);
+  --slate-950: oklch(12.9% .042 264.695);
+  --gray-50: oklch(98.5% .002 247.839);
+  --gray-100: oklch(96.7% .003 264.542);
+  --gray-200: oklch(92.8% .006 264.531);
+  --gray-300: oklch(87.2% .01 258.338);
+  --gray-400: oklch(70.7% .022 261.325);
+  --gray-500: oklch(55.1% .027 264.364);
+  --gray-600: oklch(44.6% .03 256.802);
+  --gray-700: oklch(37.3% .034 259.733);
+  --gray-800: oklch(27.8% .033 256.848);
+  --gray-900: oklch(21% .034 264.665);
+  --gray-950: oklch(13% .028 261.692);
+  --zinc-50: oklch(98.5% 0 0);
+  --zinc-100: oklch(96.7% .001 286.375);
+  --zinc-200: oklch(92% .004 286.32);
+  --zinc-300: oklch(87.1% .006 286.286);
+  --zinc-400: oklch(70.5% .015 286.067);
+  --zinc-500: oklch(55.2% .016 285.938);
+  --zinc-600: oklch(44.2% .017 285.786);
+  --zinc-700: oklch(37% .013 285.805);
+  --zinc-800: oklch(27.4% .006 286.033);
+  --zinc-900: oklch(21% .006 285.885);
+  --zinc-950: oklch(14.1% .005 285.823);
+  --neutral-50: oklch(98.5% 0 0);
+  --neutral-100: oklch(97% 0 0);
+  --neutral-200: oklch(92.2% 0 0);
+  --neutral-300: oklch(87% 0 0);
+  --neutral-400: oklch(70.8% 0 0);
+  --neutral-500: oklch(55.6% 0 0);
+  --neutral-600: oklch(43.9% 0 0);
+  --neutral-700: oklch(37.1% 0 0);
+  --neutral-800: oklch(26.9% 0 0);
+  --neutral-900: oklch(20.5% 0 0);
+  --neutral-950: oklch(14.5% 0 0);
+  --stone-50: oklch(98.5% .001 106.423);
+  --stone-100: oklch(97% .001 106.424);
+  --stone-200: oklch(92.3% .003 48.717);
+  --stone-300: oklch(86.9% .005 56.366);
+  --stone-400: oklch(70.9% .01 56.259);
+  --stone-500: oklch(55.3% .013 58.071);
+  --stone-600: oklch(44.4% .011 73.639);
+  --stone-700: oklch(37.4% .01 67.558);
+  --stone-800: oklch(26.8% .007 34.298);
+  --stone-900: oklch(21.6% .006 56.043);
+  --stone-950: oklch(14.7% .004 49.25);
 }
 
 @font-face {
@@ -466,37 +437,65 @@
   font-display: swap;
 }
 
-:root {
-  --zozan: #0d8f7c;
-  --primary: var(--teal-400);
-  --secondary: var(--blue-grey-500);
-  --mid: var(--grey-600);
-  --danger: var(--pink-600);
-  --warning: var(--amber-600);
-  --success: var(--green-600);
-  --info: var(--cyan-600);
-  --primary-2: var(--teal-200);
-  --secondary-2: var(--blue-grey-400);
-  --mid-2: var(--grey-400);
-  --danger-2: var(--pink-300);
-  --warning-2: var(--amber-300);
-  --success-2: var(--green-300);
-  --info-2: var(--cyan-300);
-  accent-color: var(--primary) !important;
-}
-
 [data-theme="light"], :root:not([data-theme="dark"]) {
   --base-up: #222;
   --base-down: #fff;
-  --drop-shadow-color: #00000060;
+  --primary: var(--blue-500);
+  --primary-2: var(--cyan-500);
+  --primary-inverse: var(--white);
+  --secondary: var(--zinc-500);
+  --secondary-2: var(--zinc-600);
+  --secondary-inverse: var(--white);
+  --header-bar-h: 2px;
+  --mid: var(--gray-500);
+  --base-tint: var(--mid);
+  --drop-shadow-color: color-mix(in srgb, var(--base-up) 25%, var(--transparent) 100%);
+  --glass-shadow-color: color-mix(in srgb, var(--base-up) 10%, var(--transparent) 100%);
+  --glass-border-color: color-mix(in srgb, var(--base-down) 100%, var(--transparent) 100%);
+  --bp-1: 10%;
+  --bp-2: 20%;
+  --app-back-img: linear-gradient(135deg, var(--app-back) 0%, var(--app-back) 50%, var(--app-back-2) 100%);
+  --accent-bg-img: linear-gradient(to right, var(--primary) 0%, var(--primary) 30%, var(--primary-2) 100%);
+  --danger: var(--red-500);
+  --danger-2: var(--red-600);
+  --warning: var(--amber-500);
+  --warning-2: var(--amber-600);
+  --success: var(--lime-500);
+  --success-2: var(--lime-600);
+  --info: var(--cyan-500);
+  --info-2: var(--cyan-300);
   color-scheme: light;
+  accent-color: var(--primary) !important;
 }
 
 :root[data-theme="dark"] {
   --base-up: #fff;
   --base-down: #222;
+  --primary: var(--blue-500);
+  --primary-2: var(--cyan-400);
+  --primary-inverse: var(--white);
+  --secondary: var(--zinc-500);
+  --secondary-2: var(--zinc-700);
+  --secondary-inverse: var(--white);
+  --header-bar-h: 2px;
+  --base-tint: var(--primary);
   --drop-shadow-color: color-mix(in srgb, var(--primary) 25%, var(--transparent) 100%);
+  --glass-shadow-color: color-mix(in srgb, var(--primary) 10%, var(--transparent) 100%);
+  --glass-border-color: color-mix(in srgb, var(--primary) 20%, var(--transparent) 100%);
+  --bp-1: 3%;
+  --bp-2: 10%;
+  --app-back-img: linear-gradient(135deg, var(--app-back) 0%, var(--app-back) 50%, var(--app-back-2) 100%);
+  --accent-bg-img: linear-gradient(to right, var(--primary) 0%, var(--primary) 30%, var(--primary-2) 100%);
+  --danger: var(--red-700);
+  --danger-2: var(--red-500);
+  --warning: var(--amber-600);
+  --warning-2: var(--amber-700);
+  --success: var(--lime-600);
+  --success-2: var(--lime-700);
+  --info: var(--cyan-500);
+  --info-2: var(--cyan-700);
   color-scheme: dark;
+  accent-color: var(--primary) !important;
 }
 
 :root {
@@ -506,11 +505,11 @@
   --d4: 70%;
   --d5: 90%;
   --transparent: #fff0;
-  --text: color-mix(in oklab, var(--base-up) 100%, var(--primary) 50%);
-  --primary-inverse: var(--base-down);
-  --primary-hover: color-mix(in oklab, var(--primary) var(--d5), var(--base-up) var(--d1));
+  --ghost: color-mix(in oklab, var(--base-up) 5%, transparent 100%);
+  --text: color-mix(in oklab, var(--base-up) 90%, var(--primary) 10%);
+  --active: color-mix(in oklab, var(--primary) 100%, var(--base-down) 25%);
+  --primary-hover: color-mix(in oklab, var(--primary) 100%, var(--base-up) 50%);
   --primary-focus: color-mix(in srgb, var(--primary), var(--transparent) 50%);
-  --secondary-inverse: var(--base-down);
   --secondary-hover: color-mix(in oklab, var(--primary) var(--d5), var(--base-up) var(--d1));
   --secondary-focus: color-mix(in srgb, var(--primary) var(--d1), var(--transparent));
   --primary-d5: color-mix(in oklab, var(--base-down) var(--d5), var(--primary) var(--d1));
@@ -523,6 +522,16 @@
   --primary-u3: color-mix(in oklab, var(--base-up) var(--d3), var(--primary) var(--d3));
   --primary-u2: color-mix(in oklab, var(--base-up) var(--d2), var(--primary) var(--d4));
   --primary-u1: color-mix(in oklab, var(--base-up) var(--d1), var(--primary) var(--d5));
+  --primary2-d5: color-mix(in oklab, var(--base-down) var(--d5), var(--primary-2) var(--d1));
+  --primary2-d4: color-mix(in oklab, var(--base-down) var(--d4), var(--primary-2) var(--d2));
+  --primary2-d3: color-mix(in oklab, var(--base-down) var(--d3), var(--primary-2) var(--d3));
+  --primary2-d2: color-mix(in oklab, var(--base-down) var(--d2), var(--primary-2) var(--d4));
+  --primary2-d1: color-mix(in oklab, var(--base-down) var(--d1), var(--primary-2) var(--d5));
+  --primary2-u5: color-mix(in oklab, var(--base-up) var(--d5), var(--primary-2) var(--d1));
+  --primary2-u4: color-mix(in oklab, var(--base-up) var(--d4), var(--primary-2) var(--d2));
+  --primary2-u3: color-mix(in oklab, var(--base-up) var(--d3), var(--primary-2) var(--d3));
+  --primary2-u2: color-mix(in oklab, var(--base-up) var(--d2), var(--primary-2) var(--d4));
+  --primary2-u1: color-mix(in oklab, var(--base-up) var(--d1), var(--primary-2) var(--d5));
   --secondary-d5: color-mix(in oklab, var(--base-down) var(--d5), var(--secondary) var(--d1));
   --secondary-d4: color-mix(in oklab, var(--base-down) var(--d4), var(--secondary) var(--d2));
   --secondary-d3: color-mix(in oklab, var(--base-down) var(--d3), var(--secondary) var(--d3));
@@ -543,16 +552,25 @@
   --mid-u3: color-mix(in oklab, var(--base-up) var(--d3), var(--mid) var(--d3));
   --mid-u2: color-mix(in oklab, var(--base-up) var(--d2), var(--mid) var(--d4));
   --mid-u1: color-mix(in oklab, var(--base-up) var(--d1), var(--mid) var(--d5));
-  --app-back: color-mix(in srgb, var(--base-down) 10%, var(--primary) 10%);
-  --form-back: color-mix(in srgb, var(--primary) 3%, var(--base-down) 100%);
+  --bd-tr-10: color-mix(in srgb, var(--base-down) 20%, var(--transparent) 100%);
+  --bd-tr-20: color-mix(in srgb, var(--base-down) 40%, var(--transparent) 100%);
+  --bd-tr-30: color-mix(in srgb, var(--base-down) 60%, var(--transparent) 100%);
+  --accent-bg-img-v: linear-gradient(to bottom, var(--primary) 0%, var(--primary) 30%, var(--primary-2) 100%);
+  --glass-bg-img: linear-gradient(180deg, var(--base-down) 0%, var(--bd-tr-20) 50%, var(--bd-tr-20) 100%);
+  --glass-shadow: 0 5px 30px var(--glass-shadow-color);
+  --glass-border: 1px solid var(--glass-border-color);
+  --app-back: color-mix(in srgb, var(--base-down) 80%, var(--base-tint) var(--bp-2));
+  --app-back-2: color-mix(in srgb, var(--base-down) 80%, var(--primary-2) var(--bp-2));
+  --app-back-img: linear-gradient(135deg, var(--app-back) 0%, var(--app-back) 10%, var(--app-back-2) 100%);
+  --form-back: color-mix(in srgb, var(--base-down) 100%, var(--base-tint) var(--bp-1));
+  --border-color-light: color-mix(in srgb, var(--base-down) 100%, var(--primary) 20%);
+  --border-color: color-mix(in srgb, var(--base-down) 100%, var(--primary) 40%);
+  --border-color-dark: color-mix(in srgb, var(--base-down) 100%, var(--primary) 60%);
   --background-color: var(--base-down);
   --background-hover: color-mix(in srgb, var(--base-up) 10%, transparent);
   --text-color: var(--text);
   --color: var(--text-color);
   --focus-color: var(--primary-focus);
-  --border-color-light: var(--primary-d4);
-  --border-color: var(--primary-d3);
-  --border-color-dark: var(--primary-d2);
   --modal-overlay-backdrop-filter: blur(3px);
   --modal-overlay-background-color: color-mix(in srgb, var(--mid), transparent 90%);
   --main-color: var(--base-up);
@@ -563,10 +581,13 @@
   --muted-background-color: var(--mid-d5);
   --drop-shadow: 0px 10px 30px 0px var(--drop-shadow-color);
   --drop-shadow-r: 0px -10px 30px 0px var(--drop-shadow-color);
+  --drop-shadow-s: 0px 2px 4px 0px var(--drop-shadow-color);
+  --drop-shadow-m: 0px 5px 10px 0px var(--drop-shadow-color);
+  --drop-shadow-mr: 0px -5px 10px 0px var(--drop-shadow-color);
   --focus-shadow: 0 0 0 3px var(--focus-color);
   --form-element-color: var(--color);
   --form-element-background-color: var(--background-color);
-  --form-element-border-color: var(--border-color-light);
+  --form-element-border-color: var(--border-color);
   --form-element-focus-color: var(--primary-focus);
   --form-element-active-background-color: var(--background-color);
   --form-element-active-border-color: var(--background-color);
@@ -618,18 +639,22 @@
   --spacing: 6px;
   --spacing-half: calc(var(--spacing) / 2);
   --spacing-2x: calc(var(--spacing) * 2);
+  --panel-spacing: var(--spacing-2x);
   --line-height: 1;
   --scrollbar-width: 0px;
-  --border-radius: var(--spacing);
+  --border-radius: calc(var(--spacing-half) * 3);
   --border-width: 2px;
   --outline-width: 2px;
   --transition: .2s ease-in;
+  --border: var(--border-width) solid var(--border-color);
+  --border-light: var(--border-width) solid var(--border-color-light);
+  --border-dark: var(--border-width) solid var(--border-color-dark);
   --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
-  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 127, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
   --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
@@ -638,17 +663,17 @@
   --font-size: 13px !important;
 }
 
-[data-theme="dark"] {
+:root[data-theme="dark"] {
   --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 127, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
-  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 127, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
-  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
-  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 127, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 127, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
@@ -659,6 +684,12 @@
 :root {
   --table-border-color: var(--border-color);
   --table-row-stripped-background-color: color-mix(in srgb, var(--background-color), transparent 10%);
+  --range-border-color: var(--border-color);
+  --range-active-border-color: var(--border-color);
+  --range-thumb-border-color: var(--background-color);
+  --range-thumb-color: var(--secondary);
+  --range-thumb-hover-color: var(--secondary-hover);
+  --range-thumb-active-color: var(--primary);
 }
 
 :focus {
@@ -901,7 +932,7 @@ button {
   --background-color-2: var(--primary-2);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
-  --bg-img: linear-gradient(to right, var(--background-color) 0%, var(--background-color-2) 51%, var(--background-color) 100%);
+  --bg-img: linear-gradient(135deg, var(--background-color) 0%, var(--background-color) 20%, var(--background-color-2) 51%, var(--background-color) 80%, var(--background-color) 100%);
   --pad-h: calc(var(--spacing) * 3 / 2);
   --pad-v: calc(var(--spacing) * 3 / 2);
   --box-shadow: 0px 0px 0px 0px var(--drop-shadow-color);
@@ -971,6 +1002,7 @@ button.warning {
 
 button:is(.primary, .secondary, .success, .danger, .warning, .error, .info) {
   background-image: var(--bg-img);
+  box-shadow: var(--drop-shadow-m);
   background-size: 200%;
   border: none;
 }
@@ -985,7 +1017,7 @@ button:not(:is(.primary, .secondary, .success, .danger, .warning, .error, .info)
 }
 
 button:not(:is(.primary, .secondary, .success, .danger, .warning, .error, .info)):hover {
-  background-color: color-mix(in oklab, var(--background-color) var(--d5), var(--base-up) var(--d1));
+  background-color: color-mix(in oklab, var(--background-color) 100%, var(--base-up) 20%);
 }
 
 button.outline {
@@ -1786,10 +1818,6 @@ html, body {
   background: none;
 }
 
-select, input, option, input[type="radio"], input[type="range"], progress {
-  accent-color: var(--primary) !important;
-}
-
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
   background-position: .5rem;
   background-size: 1rem;
@@ -1817,15 +1845,15 @@ select:focus > option:hover {
 .tabulator {
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
-  transform: none;
-  background-color: var(--background-color) !important;
   font-size: var(--font-size) !important;
+  background-color: #0000 !important;
 }
 
 .tabulator > .tabulator-header {
   border-bottom: 1px solid var(--border-color);
   z-index: 1;
   background-color: var(--background-color);
+  box-shadow: var(--drop-shadow-m);
 }
 
 .tabulator > .tabulator-header > .tabulator-header-contents {
@@ -1834,16 +1862,17 @@ select:focus > option:hover {
 }
 
 .tabulator > .tabulator-header > .tabulator-header-contents > .tabulator-headers > .tabulator-col {
-  background: var(--primary-d5);
   border-right: 1px solid var(--border-color);
+  background: none;
 }
 
 .tabulator > .tabulator-tableholder > .tabulator-table {
   color: var(--color);
+  background-color: #0000;
 }
 
 .tabulator > .tabulator-tableholder > .tabulator-table > .tabulator-row {
-  background-color: var(--base-down);
+  background-color: #0000;
 }
 
 .tabulator > .tabulator-tableholder > .tabulator-table > .tabulator-row > .tabulator-cell {
@@ -1860,14 +1889,15 @@ select:focus > option:hover {
 }
 
 .tabulator > .tabulator-tableholder > .tabulator-table > .tabulator-row.tabulator-row-even {
-  background-color: var(--primary-d5);
+  background-color: var(--ghost);
 }
 
 .tabulator > .tabulator-footer {
-  background-color: var(--primary-d5);
+  background-color: var(--background-color);
   border-right: 1px solid var(--border-color);
   border-top: 1px solid var(--border-color);
   color: var(--color);
+  box-shadow: var(--drop-shadow-mr);
 }
 
 .tabulator > .tabulator-footer > .tabulator-footer-contents {
@@ -2178,8 +2208,19 @@ select:focus > option:hover {
 }
 
 .glass {
-  backdrop-filter: blur(10px);
-  background: #ffffff40;
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: var(--border-radius);
+  background: #fff3;
+  border: 1px solid #ffffff4d;
+  box-shadow: 0 4px 30px #0000001a;
+}
+
+.glass-vg {
+  background: linear-gradient(-90deg, var(--white) 100%, #fff3 0%);
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: var(--border-radius);
+  border: 1px solid #ffffff4d;
+  box-shadow: 0 4px 30px #0000001a;
 }
 
 .glass-panel {
@@ -2990,7 +3031,6 @@ app-skeleton {
 }
 
 app-main-panel {
-  background: var(--app-back);
   width: 100%;
   height: 100%;
   display: block;
@@ -3013,12 +3053,11 @@ app-main-panel > .mp-cover > app-ribbon-container {
 app-main-panel > .mp-cover > .mp-panels {
   width: 100%;
   height: 100%;
-  padding: var(--spacing-half);
+  padding: var(--panel-spacing);
   grid-area: ga_panels;
   grid-template-columns: auto 1fr auto;
   grid-template-areas: "ga_left ga_middle ga_right";
   display: grid;
-  overflow: hidden;
 }
 
 app-main-panel > .mp-cover > .mp-panels .mp-middle {
@@ -3029,7 +3068,6 @@ app-main-panel > .mp-cover > .mp-panels .mp-middle {
   width: 100%;
   height: 100%;
   display: grid;
-  overflow: auto;
 }
 
 app-main-panel > app-main-panel-drag-window {
@@ -3199,7 +3237,7 @@ app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrap
 
 app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button {
   --border-color: transparent;
-  background: var(--primary-inverse);
+  background: var(--base-down);
   width: auto;
   min-width: 50px;
   max-width: 140px;
@@ -3410,11 +3448,11 @@ app-radio-button[readonly] * {
 }
 
 :root {
-  --tab-header-background: var(--background-color);
-  --tab-header-foreground: var(--color);
   --tab-accent-color: var(--primary);
   --tab-accent-hover: color-mix(in srgb, var(--tab-accent-color) 50%, transparent);
-  --tab-body: var(--background-color);
+  --tab-body: var(--glass-bg-img);
+  --tab-header-foreground: var(--color);
+  --tab-header-background: var(--background-color);
   --tab-border-h: 3px;
   --tab-header-border-color: transparent;
 }
@@ -3426,10 +3464,10 @@ app-tab-container {
   width: 100%;
   height: 100%;
   display: grid;
-  overflow-y: hidden;
 }
 
 app-tab-container > .appTabContainerTop {
+  z-index: 1;
   grid-area: th-head;
   grid-template-columns: 16px 1fr;
   grid-template-areas: "th-menu th-header";
@@ -3437,15 +3475,6 @@ app-tab-container > .appTabContainerTop {
   overflow: hidden;
 }
 
-app-tab-container > .appTabContainerTop:after {
-  content: "";
-  background-color: var(--border-color);
-  width: 100%;
-  height: 1px;
-  position: absolute;
-  bottom: 0;
-}
-
 app-tab-container > .appTabContainerTop > app-optionsmenu {
   grid-area: th-menu;
   justify-content: start;
@@ -3471,10 +3500,12 @@ app-tab-container > .appTabContainerTop > .appTabContainerHeader > app-tab-heade
   border-top-color: var(--tab-header-border-color);
   min-width: 60px;
   padding: var(--spacing-half) var(--spacing);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
   grid-template-columns: 1fr auto;
   grid-template-areas: "th-title th-close";
   align-items: center;
-  transition: background-color .5s;
+  transition: all .5s;
   display: grid;
   position: relative;
 }
@@ -3496,7 +3527,7 @@ app-tab-container > .appTabContainerTop > .appTabContainerHeader > app-tab-heade
   background-image: var(--icon-close);
   width: 1rem;
   height: 1rem;
-  transition: opacity var(--transition);
+  transition: var(--transition);
   cursor: pointer;
   background-position: center;
   background-repeat: no-repeat;
@@ -3515,9 +3546,6 @@ app-tab-container > .appTabContainerTop > .appTabContainerHeader > app-tab-heade
 }
 
 app-tab-container > .appTabContainerTop > .appTabContainerHeader > app-tab-header.active {
-  border-top-color: var(--tab-accent-color);
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
   background: var(--background-color);
   outline: none;
 }
@@ -3529,10 +3557,10 @@ app-tab-container > .appTabContainerTop > .appTabContainerHeader > app-tab-heade
 
 app-tab-container > .appTabContainerTop > .appTabContainerHeader > app-tab-header.active:after {
   content: "";
-  background-color: var(--background-color);
+  background: var(--accent-bg-img);
   z-index: 1;
   width: 100%;
-  height: 1px;
+  height: 3px;
   position: absolute;
   bottom: 0;
 }
@@ -3553,11 +3581,8 @@ app-tab-container > .appTabContainerTop > .appTabContainerHeader > app-tab-heade
 
 app-tab-container > .appTabContainerBody {
   background: var(--tab-body);
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
+  border: var(--glass-border);
+  border-radius: var(--border-radius);
   grid-area: th-body;
   display: grid;
   overflow-y: auto;
@@ -4067,7 +4092,10 @@ app-button-list.toolbar.vertical > button:first-child {
 
 app-sub-panel {
   position: relative;
-  overflow: hidden;
+}
+
+app-sub-panel > app-tab-container .appTabContainerBody {
+  box-shadow: var(--glass-shadow);
 }
 
 app-sub-panel.Pos-Center {
@@ -4080,57 +4108,73 @@ app-sub-panel.Pos-Center > app-tab-container > .appTabContainerBody > app-tab {
 
 app-sub-panel.Pos-Left {
   width: min(250px, 20vw);
-  padding-right: var(--spacing);
+  padding-right: var(--panel-spacing);
   grid-area: ga_left;
   min-width: 100px !important;
 }
 
 app-sub-panel.Pos-Right {
   width: min(250px, 20vw);
-  padding-left: var(--spacing);
+  padding-left: var(--panel-spacing);
   grid-area: ga_right;
   min-width: 100px !important;
 }
 
 app-sub-panel.Pos-Bottom {
   height: min(200px, 20vh);
-  padding-top: var(--spacing);
+  padding-top: var(--panel-spacing);
   grid-area: ga_bottom;
   min-height: 100px !important;
 }
 
 app-sub-panel > .panel-resizer {
   z-index: 100;
+  opacity: .1;
+  transition: all .5s;
   position: absolute;
 }
 
 app-sub-panel > .panel-resizer:hover {
-  background-color: var(--range-border-color);
+  opacity: .4;
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 20px 0px var(--primary);
 }
 
 app-sub-panel > .panel-resizer.panel-resizer-b {
   cursor: row-resize;
   width: 100%;
-  height: var(--spacing);
+  height: var(--panel-spacing);
   top: 0;
 }
 
+app-sub-panel > .panel-resizer.panel-resizer-b:hover {
+  background: var(--accent-bg-img);
+}
+
 app-sub-panel > .panel-resizer.panel-resizer-l {
   cursor: col-resize;
-  height: calc(100% - 20px);
-  width: var(--spacing);
+  height: calc(100% - 30px);
+  width: var(--panel-spacing);
   bottom: 0;
   right: 0;
 }
 
+app-sub-panel > .panel-resizer.panel-resizer-l:hover {
+  background: var(--accent-bg-img-v);
+}
+
 app-sub-panel > .panel-resizer.panel-resizer-r {
   cursor: col-resize;
-  height: calc(100% - 20px);
-  width: var(--spacing);
+  height: calc(100% - 30px);
+  width: var(--panel-spacing);
   bottom: 0;
   left: 0;
 }
 
+app-sub-panel > .panel-resizer.panel-resizer-r:hover {
+  background: var(--accent-bg-img-v);
+}
+
 app-accordion {
   color: var(--color);
   background-color: var(--background-color);
@@ -4204,18 +4248,24 @@ app-card {
   display: flex;
 }
 
-app-card .card-image {
+app-card > .card-image {
   max-width: 200px;
 }
 
-app-card .card-title {
+app-card > .card-title {
   text-align: center;
   width: 100%;
-  font-size: large;
+  font-size: x-large;
   font-weight: 600;
 }
 
-app-card .card-content {
+app-card > .card-subtitle {
+  text-align: center;
+  width: 100%;
+  font-size: large;
+}
+
+app-card > .card-content {
   text-align: center;
 }
 
@@ -4326,14 +4376,10 @@ app-groupbox > .groupbox-header > app-toolbar > button {
   border: none !important;
 }
 
-app-groupbox > .groupbox-header > app-toolbar > button:hover {
-  background-color: var(--mid-d3) !important;
-}
-
 app-groupbox > .groupbox-body {
   padding: var(--spacing);
   gap: var(--spacing);
-  border: 1px solid var(--border-color);
+  border: var(--glass-border);
   border-bottom-left-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
   flex-direction: column;
@@ -4354,10 +4400,6 @@ app-groupbox.flat > .groupbox-header > .groupbox-caption {
   font-size: .85rem;
 }
 
-app-groupbox.flat > .groupbox-header > app-toolbar > button:hover {
-  background-color: var(--mid-d4) !important;
-}
-
 app-groupbox.flat > .groupbox-body {
   border-color: var(--border-color-light);
   border-bottom: none;
@@ -4366,6 +4408,8 @@ app-groupbox.flat > .groupbox-body {
 }
 
 app-groupbox.frame {
+  border-radius: var(--border-radius);
+  border: var(--glass-border);
   margin-top: .875rem !important;
 }
 
@@ -4374,22 +4418,23 @@ app-groupbox.frame > .groupbox-header {
   top: calc(-1rem + var(--spacing-half));
   z-index: 1;
   border-radius: var(--border-radius);
-  border: 1px solid var(--primary);
+  border: var(--glass-border);
   padding: 0 var(--spacing);
+  box-shadow: var(--drop-shadow-s);
   position: absolute;
   left: 1rem;
 }
 
 app-groupbox.frame > .groupbox-header > .groupbox-caption {
-  color: var(--primary-u3);
   padding: var(--spacing-half);
+  font-size: .875rem;
   line-height: 1rem;
 }
 
 app-groupbox.frame > .groupbox-body {
   padding-top: calc(1.25rem + var(--spacing));
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
+  box-shadow: var(--glass-shadow);
+  border: none;
 }
 
 .inputContainer > app-groupbox {
@@ -4409,7 +4454,7 @@ app-toolbar > button {
   border-radius: 0;
   align-items: center;
   margin-bottom: 0;
-  background-color: var(--primary-inverse) !important;
+  background-color: var(--base-back) !important;
   border: 1px solid var(--form-element-border-color) !important;
 }
 
@@ -4499,8 +4544,8 @@ combo-box > .screen {
 }
 
 combo-box > .iconButton {
-  color: var(--background-color);
-  background-color: var(--primary-inverse);
+  color: var(--primary);
+  background-color: var(--form-element-background-color);
   border-width: initial;
   border-style: none;
   border-color: initial;
@@ -4510,6 +4555,11 @@ combo-box > .iconButton {
   border-bottom-left-radius: 0;
 }
 
+combo-box > .iconButton:hover {
+  background-color: var(--primary-d4);
+  color: var(--primary-inverse);
+}
+
 combo-box > .iconButton:focus {
   box-shadow: none;
 }
@@ -4686,24 +4736,32 @@ multi-combo-box .screen .selected-items .separator {
 }
 
 multi-combo-box .iconButton {
-  padding: var(--spacing);
-  cursor: pointer;
   color: var(--primary);
-  background: none;
-  border: none;
-  transition: color .2s;
+  background-color: var(--form-element-background-color);
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial;
+  padding: var(--spacing);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 multi-combo-box .iconButton:hover {
-  color: var(--primary-hover);
+  background-color: var(--primary-d4);
+  color: var(--primary-inverse);
 }
 
-multi-combo-box .iconButton.up {
-  transform: rotate(180deg);
+multi-combo-box .iconButton:focus {
+  box-shadow: none;
 }
 
-multi-combo-box .iconButton.down {
-  transform: rotate(0);
+multi-combo-box .iconButton i:before {
+  transition: rotate .5s;
+}
+
+multi-combo-box .iconButton.up i:before {
+  rotate: 180deg;
 }
 
 multi-combo-box .multi-combo-select-all {
@@ -4785,7 +4843,6 @@ app-dt {
   width: 100%;
   height: 100%;
   padding: var(--spacing);
-  background-color: var(--background-color);
   flex-grow: 1;
   grid-template-rows: auto 1fr auto;
   grid-template-areas: "dt_header"
@@ -5652,8 +5709,7 @@ app-dropdown-tree .screen {
 }
 
 app-dropdown-tree .iconButton {
-  color: var(--background-color);
-  background-color: var(--primary-inverse);
+  background-color: var(--form-element-background-color);
   padding: var(--spacing);
   border: none;
   border-top-left-radius: 0;
@@ -5806,7 +5862,6 @@ app-treeview.desc, app-treeview.desc app-treeview-item > .treeItemContainer {
 app-form {
   gap: var(--spacing);
   padding: var(--spacing);
-  background: var(--background-color);
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   display: grid;
   position: relative;
@@ -5815,7 +5870,7 @@ app-form {
 app-form .form-groupbox {
   width: 100%;
   margin-top: var(--spacing);
-  background: var(--form-back);
+  background: var(--glass-bg-img);
   grid-column: 1 / -1;
 }
 
@@ -6227,10 +6282,14 @@ app-rad-menu .arc i {
 }
 
 app-host {
+  background-image: var(--app-back-img);
+  background-repeat: no-repeat;
+  background-size: 100%;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
+  display: block;
   position: relative;
   overflow: hidden;
 }
@@ -6247,8 +6306,7 @@ app-host > nav-host {
 }
 
 nav-header {
-  background: var(--primary);
-  color: #fff;
+  color: var(--primary-u5);
   -webkit-user-drag: none;
   grid-template-columns: auto 1fr auto;
   height: 2rem;
@@ -6256,6 +6314,17 @@ nav-header {
   position: relative;
 }
 
+nav-header:after {
+  content: "";
+  width: 100%;
+  height: var(--header-bar-h);
+  z-index: 1;
+  background-image: linear-gradient(to right, var(--primary) 0%, var(--primary) 30%, var(--primary-2) 100%);
+  background-size: 100%;
+  position: absolute;
+  top: 0;
+}
+
 nav-header .iconButton {
   border: none;
   width: auto;
@@ -6276,7 +6345,6 @@ nav-header button:hover {
 nav-header button i {
   font-size: 1.2rem;
   transition: scale .3s;
-  color: var(--white) !important;
 }
 
 nav-header button i:hover {
@@ -6342,4 +6410,71 @@ nav-header > .header-right app-menu .menu-item {
 nav-header > .header-right app-menu .menu-item:hover {
   background: var(--primary-gray);
 }
+
+s-login {
+  background: linear-gradient(132deg, var(--primary2-u1), var(--primary-u1), var(--primary-u4));
+  background-size: 400% 400%;
+  width: 100%;
+  height: 100%;
+  animation: 15s infinite Gradient;
+  display: block;
+  overflow: hidden;
+}
+
+s-login > app-card {
+  border-radius: var(--border-radius);
+  backdrop-filter: blur(5px);
+  background: #fffc;
+  border: 1px solid #ffffff80;
+  justify-content: center;
+  gap: 30px;
+  height: 400px;
+  padding: 20px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%)translateY(-50%);
+  box-shadow: 0 4px 30px #0000001a;
+}
+
+s-login > app-card > .card-title {
+  background: -webkit-linear-gradient(left, var(--primary) 0%, var(--primary-2) 100%);
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}
+
+s-login > app-card > .card-subtitle {
+  color: var(--primary-u2);
+}
+
+s-login > app-card > .card-content form {
+  align-items: center;
+  gap: var(--spacing-2x);
+  min-width: 300px;
+  padding: 20px;
+}
+
+@keyframes slide {
+  0% {
+    transform: translateX(-25%);
+  }
+
+  100% {
+    transform: translateX(25%);
+  }
+}
+
+@keyframes Gradient {
+  0% {
+    background-position: 0%;
+  }
+
+  50% {
+    background-position: 100%;
+  }
+
+  100% {
+    background-position: 0%;
+  }
+}
 /*# sourceMappingURL=index.css.map */