ui-kit-ck-consultant 0.6.69 → 1.0.1

package/dist/index.css

@@ -2,6 +2,8 @@
 
 * {
   --primary-color: #6067ae;
+  --primary-hover: #4f5699;
+  --primary-soft: #eef0f8;
   --secondary-color: #4a4c65;
   --thirty-color: #f5f5f5;
   --fourth-color: #d8d8d8;
@@ -33,10 +35,28 @@
   --orange-dark: #d86418;
   --yellow-dark: #ecbd00;
 
-  --gray: #d8d8d8;
-  --gray-light: #f3f3f3;
+  --gray: #e2e5ea;
+  --gray-light: #f3f4f6;
   --white: #ffffff;
   --black: #1e1f26;
+
+  /* modern tokens */
+  --muted: #6b7280;
+  --border: #e5e7eb;
+  --surface: #ffffff;
+  --bg: #f6f7f9;
+
+  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
+  --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.08);
+  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
+
+  --radius-sm: 6px;
+  --radius: 8px;
+  --radius-lg: 12px;
+
+  --ring: 0 0 0 3px rgba(96, 103, 174, 0.22);
+  --transition: 0.15s ease;
+
   box-sizing: border-box;
 }
 
@@ -48,20 +68,20 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(230, 230, 230, 0.6);
+  background-color: rgba(16, 24, 40, 0.45);
   z-index: 20;
 }
 
 ._2YluD {
   position: relative;
   margin: auto;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-lg);
   background-color: var(--white);
-  padding: 64px;
+  padding: 40px;
   width: 600px;
   max-height: 90%;
   overflow-y: auto;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
 }
 
 ._2YluD._2vjgy {
@@ -184,20 +204,21 @@
 ._3v07V {
   display: flex;
   width: 100%;
-  min-height: 50px;
+  min-height: 38px;
   border-radius: 8px;
   cursor: pointer;
-  transition: 0.4s;
+  transition: var(--transition);
   background-color: var(--primary-color);
-  border: 2px solid var(--primary-color);
-  padding: 0 30px;
+  border: 1px solid var(--primary-color);
+  box-shadow: var(--shadow-sm);
+  padding: 0 20px;
 }
 
 /* start - color button */
 ._Dv_TK._36slQ,
 ._3v07V._36slQ {
   background-color: var(--red);
-  border: 2px solid var(--red);
+  border: 1px solid var(--red);
 }
 ._3v07V._36slQ > span {
   color: var(--red);
@@ -209,7 +230,7 @@
 ._Dv_TK._2bzkq,
 ._3v07V._2bzkq {
   background-color: var(--blue);
-  border: 2px solid var(--blue);
+  border: 1px solid var(--blue);
 }
 ._3v07V._2bzkq > span {
   color: var(--blue);
@@ -221,7 +242,7 @@
 ._Dv_TK._3q_as,
 ._3v07V._3q_as {
   background-color: var(--green);
-  border: 2px solid var(--green);
+  border: 1px solid var(--green);
 }
 ._3v07V._3q_as > span {
   color: var(--green);
@@ -233,7 +254,7 @@
 ._Dv_TK._3h6Fo,
 ._3v07V._3h6Fo {
   background-color: var(--orange);
-  border: 2px solid var(--orange);
+  border: 1px solid var(--orange);
 }
 ._3v07V._3h6Fo > span {
   color: var(--orange);
@@ -253,6 +274,7 @@
 }
 ._3v07V {
   background-color: transparent !important;
+  box-shadow: none !important;
 }
 ._Dv_TK:not([disabled]):hover,
 ._3v07V:not([disabled]):hover,
@@ -264,6 +286,12 @@
 ._3ZzkP:not([disabled]):active {
   opacity: 0.5;
 }
+._Dv_TK:focus-visible,
+._3v07V:focus-visible,
+._3ZzkP:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
 ._Dv_TK:focus,
 ._3v07V:focus,
 ._3ZzkP:focus {
@@ -300,8 +328,8 @@
 ._3YJZS {
   background-color: var(--primary-color);
   border-radius: 8px;
-  height: 50px;
-  width: 50px;
+  height: 38px;
+  width: 38px;
   padding: 0;
 }
 ._3YJZS._3TRE4 {
@@ -335,8 +363,8 @@
 
 ._2WmL- {
   display: flex;
-  width: 40px;
-  min-height: 40px;
+  width: 30px;
+  min-height: 30px;
   height: calc(100% - 6px);
   background-color: rgba(0, 0, 0, 0.1);
   color: var(--white);
@@ -459,14 +487,14 @@
 }
 
 ._1Fq5R {
-  height: 50px;
+  height: 38px;
   width: 100%;
-  border: solid 2px var(--gray);
+  border: solid 1px var(--gray);
   border-radius: 8px;
   color: var(--black);
   font-size: 14px;
-  padding: 0 20px;
-  transition: 0.6s;
+  padding: 0 10px;
+  transition: var(--transition);
   opacity: 1;
 }
 ._1Fq5R::-moz-placeholder, ._1XBGF::-moz-placeholder {
@@ -488,10 +516,10 @@
 
 ._30Dbq {
   display: flex;
-  height: 50px;
+  height: 38px;
   width: 100%;
   overflow: hidden;
-  border: solid 2px var(--gray);
+  border: solid 1px var(--gray);
   border-radius: 8px;
   color: #b3b3b3;
   transition: 0.4s;
@@ -499,12 +527,12 @@
 
 ._30Dbq > div {
   color: #b3b3b3;
-  font-size: 20px;
+  font-size: 16px;
   margin: auto 0;
-  width: 50px;
-  transition: 0.6s;
-  padding-left: 20px;
-  padding-right: 20px;
+  width: 38px;
+  transition: var(--transition);
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 ._1XBGF {
@@ -518,10 +546,13 @@
 }
 
 ._1Fq5R:focus,
-._1XBGF:focus,
-._30Dbq:hover {
+._30Dbq:focus-within {
+  outline: none;
+  border: solid 1px var(--primary-color);
+  box-shadow: var(--ring);
+}
+._1XBGF:focus {
   outline: none;
-  border: solid 2px #b3b3b3;
 }
 
 ._1Fq5R[disabled],
@@ -540,12 +571,12 @@
 
 ._3--n1 {
   width: 100%;
-  border: solid 2px var(--gray);
+  border: solid 1px var(--gray);
   border-radius: 8px;
   color: var(--black);
   font-size: 14px;
-  padding: 20px;
-  transition: 0.6s;
+  padding: 10px;
+  transition: var(--transition);
 }
 ._3--n1::-moz-placeholder, ._1gP7a::-moz-placeholder {
   color: var(--gray);
@@ -566,7 +597,8 @@
 
 ._3--n1:focus {
   outline: none;
-  border: solid 2px #b3b3b3;
+  border: solid 1px var(--primary-color);
+  box-shadow: var(--ring);
 }
 
 ._3--n1[disabled] {
@@ -590,32 +622,33 @@
   display: flex;
   height: 50px;
   width: 100%;
-  border: solid 2px var(--gray);
-  border-radius: 8px;
+  border: solid 1px var(--border);
+  border-radius: var(--radius);
   color: var(--black);
   font-size: 14px;
   padding: 0 20px;
-  transition: 0.6s;
+  transition: var(--transition);
   opacity: 0.5;
   cursor: pointer;
 }
 
 ._1DiO5::-moz-placeholder {
-  color: var(--gray);
+  color: var(--muted);
 }
 
 ._1DiO5::placeholder {
-  color: var(--gray);
+  color: var(--muted);
 }
 
 ._1DiO5:focus {
   outline: none;
-  border: solid 2px #b3b3b3;
+  border: solid 1px var(--primary-color);
+  box-shadow: var(--ring);
 }
 
 ._1DiO5[disabled] {
   cursor: not-allowed;
-  background-color: #f5f5f5;
+  background-color: var(--gray-light);
 }
 
 ._1DiO5 > span {
@@ -634,10 +667,12 @@
   display: flex;
   left: 0;
   right: 0;
-  background-color: var(--gray);
+  background-color: var(--surface);
+  border: solid 1px var(--border);
+  box-shadow: var(--shadow-md);
   z-index: 50;
   padding: 6px;
-  border-radius: 8px;
+  border-radius: var(--radius);
 }
 
 ._1CaIX > span {
@@ -649,15 +684,22 @@
 }
 
 ._6hnFm {
-  height: 50px;
+  height: 38px;
   width: 100%;
-  border: solid 2px var(--gray);
+  border: solid 1px var(--gray);
   border-radius: 8px;
   color: var(--black);
   font-size: 14px;
-  padding: 0 20px;
-  transition: 0.6s;
+  padding: 0px 28px 0px 10px;
+  transition: var(--transition);
   opacity: 1;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
 }
 ._6hnFm::-moz-placeholder {
   color: var(--gray);
@@ -667,7 +709,8 @@
 }
 ._6hnFm:focus {
   outline: none;
-  border: solid 2px #b3b3b3;
+  border: solid 1px var(--primary-color);
+  box-shadow: var(--ring);
 }
 ._6hnFm[disabled] {
   cursor: not-allowed;
@@ -697,14 +740,14 @@
 
 ._3BzwZ {
   display: flex;
-  height: 50px;
+  height: 38px;
   width: 100%;
-  border: solid 2px var(--gray);
+  border: solid 1px var(--gray);
   border-radius: 8px;
   color: var(--black);
   font-size: 14px;
-  padding: 0 20px;
-  transition: 0.6s;
+  padding: 0 10px;
+  transition: var(--transition);
   opacity: 1;
   background-color: var(--white);
   -webkit-touch-callout: none;
@@ -722,7 +765,8 @@
 }
 ._3BzwZ:focus {
   outline: none;
-  border: solid 2px #b3b3b3;
+  border: solid 1px var(--primary-color);
+  box-shadow: var(--ring);
 }
 ._3BzwZ[disabled] {
   cursor: not-allowed;
@@ -758,8 +802,9 @@
   height: 280px;
   max-height: 450px;
   background-color: var(--white);
-  border: solid 2px var(--gray);
-  border-radius: 8px;
+  border: solid 1px var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
   z-index: 100;
   top: 90px;
   -webkit-touch-callout: none;
@@ -842,13 +887,13 @@
   left: 0;
   height: 25px;
   width: 25px;
-  border: solid 3px var(--gray);
-  border-radius: 4px;
-  transition: 0.4s;
+  border: solid 2px var(--gray);
+  border-radius: var(--radius-sm);
+  transition: var(--transition);
 }
 
 ._3Xukj input:checked ~ ._1uzL3 {
-  border: solid 3px var(--primary-color);
+  border: solid 2px var(--primary-color);
 }
 
 ._1uzL3:after {
@@ -904,13 +949,13 @@
   left: 0;
   height: 25px;
   width: 25px;
-  border: solid 3px var(--gray);
+  border: solid 2px var(--gray);
   border-radius: 25px;
-  transition: 0.4s;
+  transition: var(--transition);
 }
 
 ._2lVSW input:checked ~ ._2xIhO{
-  border: solid 3px var(--primary-color);
+  border: solid 2px var(--primary-color);
 }
 
 ._2xIhO:after {
@@ -933,19 +978,24 @@
 }
 ._3-lqN {
   width: 100%;
-  border-radius: 10px;
+  border-radius: var(--radius);
   border-spacing: 0;
   border-collapse: unset;
   overflow: hidden;
   color: var(--black);
-  border: none;
+  border: solid 1px var(--border);
   box-shadow: none;
 }
 
+._233g5 > tr:last-child > td,
+._233g5 > tr:last-child > th {
+  border-bottom: none;
+}
+
 /* Thead */
 ._1PGdH > tr > th {
-  border-bottom: solid 2px var(--secondary-color);
-  color: var(--white);
+  border-bottom: solid 1px var(--border);
+  color: var(--muted);
 }
 
 /* Tr */
@@ -961,8 +1011,8 @@
   text-align: left;
   text-transform: uppercase;
   letter-spacing: 0.4px;
-  padding: 0 8px;
-  background-color: var(--secondary-color);
+  padding: 0 10px;
+  background-color: var(--gray-light);
   border: 0;
 }
 
@@ -970,21 +1020,29 @@
 ._2PYe5 {
   font-size: 13px;
   text-align: left;
-  padding: 0 8px;
+  padding: 0 10px;
 }
 
-/* Tbody cells - default (bordures blanches comme avant) */
+/* Tbody cells - default (clean hairline rows) */
 ._233g5 > tr > td {
-  background-color: var(--thirty-color);
-  border: solid 1px var(--white);
-  border-radius: 5px;
-  transition: background-color 0.2s ease;
+  background-color: var(--surface);
+  border: none;
+  border-bottom: solid 1px var(--border);
+  border-radius: 0;
+  transition: background-color var(--transition);
 }
 ._233g5 > tr > th {
-  background-color: var(--fourth-color);
-  border: solid 1px var(--white);
-  border-radius: 5px;
-  transition: background-color 0.2s ease;
+  background-color: var(--surface);
+  font-size: 13px;
+  font-weight: 600;
+  text-align: left;
+  text-transform: none;
+  letter-spacing: normal;
+  padding: 0 10px;
+  border: none;
+  border-bottom: solid 1px var(--border);
+  border-radius: 0;
+  transition: background-color var(--transition);
 }
 ._233g5 > tr > td:first-child,
 ._233g5 > tr > th:first-child {
@@ -996,7 +1054,7 @@
 }
 ._233g5 > tr:hover > td,
 ._233g5 > tr:hover > th {
-  filter: brightness(0.95);
+  background-color: var(--gray-light);
 }
 
 /* Variant: bordered */
@@ -1041,7 +1099,7 @@
   border-right: none;
 }
 ._1bgLC ._233g5 > tr:nth-child(even) > td {
-  background-color: var(--white);
+  background-color: var(--gray-light);
 }
 ._1bgLC ._233g5 > tr:nth-child(even) > th {
   filter: brightness(1.05);
@@ -1165,12 +1223,12 @@
   width: 50px;
   height: 50px;
   border-radius: 8px;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--shadow-sm);
   color: var(--primary-color);
   font-size: 26px;
   margin: auto 0;
   margin-right: 20px;
-  transition: 0.4s;
+  transition: var(--transition);
   cursor: pointer;
 }
 
@@ -1226,8 +1284,8 @@
   left: 0;
   right: 0;
   background-image: linear-gradient(to left, var(--primary-color), var(--secondary-color));
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  border-radius: 0 0 15px 15px;
+  box-shadow: var(--shadow-md);
+  border-radius: 0 0 12px 12px;
   z-index: 1;
 }
 
@@ -1265,7 +1323,7 @@
   border-radius: 8px;
   background-color: var(--white);
   color: var(--black);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-sm);
   min-height: 85px;
   display: flex;
   overflow: hidden;
@@ -1435,7 +1493,7 @@
   background-color: var(--primary-color);
   border-radius: 8px;
   color: var(--white);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-sm);
 }
 
 ._1OCk3 {
@@ -1506,12 +1564,12 @@
 ._29tu3 {
   display: flex;
   width: 100%;
-  height: 100px;
-  padding: 20px;
+  height: 80px;
+  padding: 16px;
   background-color: var(--white);
   border-radius: 8px;
   color: var(--black);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-sm);
 }
 
 ._1b4T4 {
@@ -1522,7 +1580,7 @@
 }
 
 ._1b4T4 > span:first-child {
-  color: #67748e;
+  color: var(--muted);
   font-size: 18px;
 }
 
@@ -1541,12 +1599,12 @@
   margin: auto;
   margin-right: 0;
   background-color: var(--primary-color);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  width: 60px;
-  height: 60px;
+  box-shadow: var(--shadow-sm);
+  width: 48px;
+  height: 48px;
   border-radius: 8px;
   color: var(--white);
-  font-size: 24px;
+  font-size: 20px;
 }
 
 ._1dkwV > svg {
@@ -1557,9 +1615,9 @@
   display: flex;
   width: 100%;
   height: 50px;
-  border: solid 2px var(--primary-color);
+  border: solid 1px var(--primary-color);
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: var(--radius);
 }
 
 ._2hcr7{
@@ -1570,9 +1628,9 @@
   color: var(--white);
   font-size: 18px;
   cursor: pointer;
-  transition: 0.4s;
+  transition: var(--transition);
   margin: 3px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
 }
 ._2hcr7:hover{
   opacity: 0.7;
@@ -1594,8 +1652,8 @@
 ._2boVV {
   display: flex;
   position: relative;
-  border: var(--gray) dashed 2px;
-  border-radius: 8px;
+  border: dashed 2px var(--border);
+  border-radius: var(--radius);
 }
 
 ._2boVV img{
@@ -1606,7 +1664,7 @@
 }
 
 ._2boVV._O6vhI {
-  border: #d3d3d3 solid 2px;
+  border: 1px solid var(--border);
 }
 
 ._WECto {
@@ -1616,7 +1674,7 @@
   color: var(--primary-color);
   font-size: 20px;
   cursor: pointer;
-  transition: 0.4s;
+  transition: var(--transition);
   z-index: 10;
 }
 
@@ -1628,7 +1686,7 @@
   transform: translate(-50%, -50%);
   font-size: 30px;
   cursor: pointer;
-  transition: 0.4s;
+  transition: var(--transition);
 }
 
 ._WECto:hover,
@@ -1660,25 +1718,22 @@
 ._2UVV8 {
   display: flex;
   height: 50px;
-  color: var(--primary-color);
-  background-color: var(--white);
+  color: var(--muted);
+  background-color: transparent;
   padding: 12px;
   width: 100%;
-  border-bottom: solid 2px var(--primary-color);
+  border-bottom: solid 2px var(--border);
   cursor: pointer;
-  transition: 0.4s;
-  opacity: 0.5;
+  transition: var(--transition);
 }
 
 ._2UVV8._1JhLg {
-  opacity: 1;
+  color: var(--primary-color);
+  border-bottom-color: var(--primary-color);
 }
 
 ._2UVV8:not(._1JhLg):hover {
-  opacity: 0.7;
-}
-._2UVV8:not(._1JhLg):active {
-  opacity: 0.5;
+  color: var(--black);
 }
 
 ._2UVV8 > span {
@@ -1709,7 +1764,7 @@
   justify-content: space-around;
   padding-top: 5px;
   padding-bottom: 5px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   padding-left: 5px;
   padding-right: 5px;
   margin-bottom: 20px;
@@ -1717,7 +1772,7 @@
 }
 
 ._2ZXDI:not(._2tReM) {
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-sm);
   background-color: var(--white);
 }
 
@@ -1727,8 +1782,8 @@
 }
 
 ._3SfUF:not(._2tReM) {
-  border-radius: 8px;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
   background-color: var(--white);
 }
 
@@ -1737,10 +1792,10 @@
   height: 40px;
   padding: 10px;
   margin: 5px;
-  color: var(--black);
-  transition: 0.4s;
+  color: var(--muted);
+  transition: var(--transition);
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: var(--radius);
   white-space: nowrap;
   flex-grow: 1;
   flex-shrink: 1;
@@ -1756,19 +1811,17 @@
 ._38JFK._1Km4b:active {
   cursor: not-allowed !important;
   background-color: var(--gray) !important;
-  color: var(--white) !important;
+  color: var(--muted) !important;
   opacity: 1 !important;
 }
 
 ._38JFK:not(._NU04_):hover {
-  background-color: var(--primary-color);
-  color: var(--white);
-  opacity: 0.7;
+  background-color: var(--primary-soft);
+  color: var(--black);
 }
 ._38JFK:not(._NU04_):active {
-  background-color: var(--primary-color);
-  color: var(--white);
-  opacity: 0.5;
+  background-color: var(--primary-soft);
+  color: var(--primary-color);
 }
 
 ._38JFK > span {
@@ -1805,8 +1858,8 @@
   padding-right: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
-  border-radius: 8px;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
   background-color: var(--white);
   margin-bottom: 20px;
   flex-wrap: wrap;
@@ -1818,8 +1871,8 @@
 }
 
 ._38nW8:not(._3ERlR) {
-  border-radius: 8px;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
   background-color: var(--white);
 }
 
@@ -1829,28 +1882,29 @@
   height: 40px;
   padding: 10px;
   margin: 5px;
-  color: var(--black);
+  color: var(--muted);
   cursor: pointer;
   white-space: nowrap;
   flex-grow: 1;
   flex-shrink: 1;
   background-color: var(--thirty-color);
+  transition: var(--transition);
 }
 
 ._2JnR3:first-child {
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
 
 ._2JnR3:last-child {
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
 }
 
 @media screen and (max-width: 640px) {
   ._2JnR3,
   ._2JnR3 {
-    border-radius: 8px;
+    border-radius: var(--radius);
   }
 }
 
@@ -1905,7 +1959,7 @@
   ._2JnR3._3c4B_:active {
     cursor: not-allowed !important;
     background-color: var(--thirty-color) !important;
-    color: var(--gray) !important;
+    color: var(--muted) !important;
     opacity: 1 !important;
   }
 
@@ -1919,15 +1973,13 @@
   }
 
   ._2JnR3:not(._a0pKA):hover {
-    background-color: var(--primary-color);
+    background-color: var(--primary-hover);
     color: var(--white);
-    opacity: 0.7;
   }
 
   ._2JnR3:not(._a0pKA):active {
     background-color: var(--primary-color);
     color: var(--white);
-    opacity: 0.5;
   }
 
   ._2JnR3:not(._a0pKA):active > div:first-child {
@@ -1981,8 +2033,8 @@
   width: 100%;
   padding-top: 5px;
   padding-bottom: 5px;
-  border-radius: 8px;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
   background-color: var(--white);
   margin-bottom: 20px;
 }
@@ -2015,8 +2067,8 @@
 }
 
 ._2cxzo:not(._2WKxa) {
-  border-radius: 8px;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
   background-color: var(--white);
 }
 
@@ -2025,10 +2077,10 @@
   height: 40px;
   padding: 10px;
   margin: 5px 10px;
-  color: var(--black);
-  transition: 0.4s;
+  color: var(--muted);
+  transition: var(--transition);
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: var(--radius);
   white-space: nowrap;
   flex-grow: 1;
   flex-shrink: 1;
@@ -2048,19 +2100,17 @@
 ._MFel7._Eq4pW:active {
   cursor: not-allowed !important;
   background-color: var(--gray) !important;
-  color: var(--white) !important;
+  color: var(--muted) !important;
   opacity: 1 !important;
 }
 
 ._MFel7:not(._32WLP):hover {
-  background-color: var(--primary-color);
-  color: var(--white);
-  opacity: 0.7;
+  background-color: var(--primary-soft);
+  color: var(--black);
 }
 ._MFel7:not(._32WLP):active {
-  background-color: var(--primary-color);
-  color: var(--white);
-  opacity: 0.5;
+  background-color: var(--primary-soft);
+  color: var(--primary-color);
 }
 
 ._MFel7 > span {
@@ -2089,8 +2139,8 @@
   height: 100%;
   background-color: var(--secondary-color);
   z-index: 11;
-  transition: 0.6s;
-  box-shadow: 7px -1px 6px 0 rgba(0, 0, 0, 0.16);
+  transition: var(--transition);
+  box-shadow: var(--shadow-md);
   border-radius: 0 25px 25px 0;
 }
 
@@ -2125,7 +2175,7 @@
   margin-right: 0;
   padding: 0 2rem;
   font-size: 2rem;
-  transition: 0.6s;
+  transition: var(--transition);
   color: var(--white);
   cursor: pointer;
 }
@@ -2190,12 +2240,12 @@
 }
 ._1hv_V::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
+  border-radius: var(--radius);
 }
 ._1hv_V::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.25);
   opacity: 0.7;
-  border-radius: 8px;
+  border-radius: var(--radius);
 }
 ._1hv_V::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.45);
@@ -2211,8 +2261,8 @@
   margin-bottom: 8px;
   height: 40px;
   cursor: pointer;
-  transition: 0.6s;
-  border-radius: 8px;
+  transition: var(--transition);
+  border-radius: var(--radius);
   white-space: nowrap;
 }
 ._1iy27:hover,
@@ -2225,7 +2275,8 @@
 }
 ._1iy27._BPuzP,
 ._1ZHFn._BPuzP {
-  background-color: rgba(0, 0, 0, 0.15);
+  background-color: var(--primary-soft);
+  color: var(--primary-color);
 }
 ._1iy27._2BDmo,
 ._1ZHFn._2BDmo {
@@ -2358,9 +2409,9 @@
 ._bHyVu ._XOUj6 {
   position: relative;
   height: 30px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   background-color: var(--thirty-color);
-  transition: 0.7s;
+  transition: var(--transition);
 }
 
 ._bHyVu ._XOUj6:hover {
@@ -2372,7 +2423,7 @@
   display: block;
   width: 100%;
   height: 30px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   margin: 0;
 }
 
@@ -2417,9 +2468,9 @@
 ._2CYNt > p {
   margin: 0;
   margin-top: 1rem;
-  color: #ffffff;
+  color: var(--white);
   background-color: var(--primary-color);
-  border-radius: 8px;
+  border-radius: var(--radius);
   padding: 0.8rem;
   font-size: 16px;
 }
@@ -2478,7 +2529,7 @@
 ._2mqrQ > li {
   cursor: pointer;
   display: flex;
-  border-radius: 8px;
+  border-radius: var(--radius);
   margin-left: 5px;
   margin-right: 5px;
   width: 40px;
@@ -2486,7 +2537,7 @@
   background-color: var(--thirty-color);
   float: left;
   list-style: none;
-  transition: 0.3s;
+  transition: var(--transition);
 }
 
 ._2mqrQ > li:hover {
@@ -2547,10 +2598,10 @@
   display: flex;
   width: 150px;
   height: 200px;
-  border: dashed 2px var(--gray);
-  border-radius: 8px;
+  border: dashed 2px var(--border);
+  border-radius: var(--radius);
   cursor: pointer;
-  transition: 0.3s;
+  transition: var(--transition);
   overflow: hidden;
 }
 ._2tyK_ section:hover {
@@ -2598,14 +2649,14 @@
   width: 100%;
   min-height: 200px;
   border: dashed 2px var(--primary-color);
-  border-radius: 8px;
+  border-radius: var(--radius);
   cursor: pointer;
-  transition: 0.3s;
+  transition: var(--transition);
   overflow: hidden;
 }
 
 ._HCj8R:hover {
-  border: dashed 2px var(--gray);
+  border: dashed 2px var(--border);
 }
 
 ._HCj8R:active {
@@ -2638,7 +2689,7 @@
   padding: 1rem;
   background-color: var(--gray);
   margin: 0.5rem;
-  border-radius: 8px;
+  border-radius: var(--radius);
 }
 
 ._34DnJ {
@@ -2649,7 +2700,7 @@
   padding: 0.4rem;
   cursor: pointer;
   font-size: 18px;
-  transition: 0.3s;
+  transition: var(--transition);
 }
 
 ._34DnJ:hover {
@@ -2662,7 +2713,7 @@
 
 ._2qV1W {
   display: inline-block;
-  border-radius: 8px;
+  border-radius: var(--radius);
   background-color: var(--primary-color);
   font-size: 12px;
   font-weight: normal;
@@ -2683,7 +2734,8 @@
   display: flex;
   padding: 1rem;
   background-color: #ffffff;
-  border-radius: 8px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
   margin-top: 1rem;
   z-index: 120;
 }
@@ -2698,7 +2750,7 @@
   width: 100%;
   min-height: 60px;
   padding: 0 1rem;
-  border-radius: 8px;
+  border-radius: var(--radius);
 }
 
 ._2fV2F > span {
@@ -2742,6 +2794,11 @@
   padding: 2px;
   padding-left: 8px;
 }
+
+._1bGM- button {
+  padding: 0 0 0 8px;
+  font-size: 14px;
+}
 /* start ListingHorizontal */
 
 ._64Nqe {
@@ -2810,7 +2867,7 @@
   top: 20px;
   left: 70px;
   right: 70px;
-  border-bottom: dashed 1px black;
+  border-bottom: dashed 1px var(--border);
   z-index: 3;
 }
 
@@ -2884,8 +2941,13 @@
 
 ._2kN79 {
   display: inline-flex;
+  align-items: center;
+  height: 38px;
   cursor: pointer;
-  padding: 1rem;
+  padding: 0 12px;
+  border: solid 1px var(--gray);
+  border-radius: 8px;
+  background-color: #fff;
   transition: 0.3s;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -2915,14 +2977,15 @@
 ._2Y_fS {
   display: none;
   position: absolute;
-  background-color: red;
   z-index: 100;
-  padding: 1rem;
-  border-radius: 8px;
-  background-color: var(--gray);
+  margin-top: 6px;
+  padding: 6px;
+  border-radius: var(--radius);
+  background-color: var(--surface);
+  border: solid 1px var(--border);
   color: var(--black);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  transition: 0.3s;
+  box-shadow: var(--shadow-md);
+  transition: var(--transition);
 }
 
 ._2Y_fS._3nBzR {
@@ -2930,8 +2993,11 @@
 }
 
 ._2Y_fS > span {
-  margin: 0.4rem;
-  transition: 0.3s;
+  display: block;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  transition: var(--transition);
+  white-space: nowrap;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2940,10 +3006,8 @@
 }
 
 ._2Y_fS > span:hover {
-  opacity: 0.8;
-}
-._2Y_fS > span:active {
-  opacity: 0.6;
+  background-color: var(--primary-soft);
+  color: var(--primary-color);
 }
 
 ._2yA72 {
@@ -2975,7 +3039,7 @@
   color: #262626;
   margin: 0;
   letter-spacing: 3px;
-  padding-left: 6p;
+  padding-left: 6px;
 }
 
 ._1aeC7 {
@@ -3045,7 +3109,7 @@
   display: inline-flex;
   background-color: var(--gray);
   border-radius: 20px;
-  height: 40px;
+  height: 38px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -3056,7 +3120,7 @@
 ._zCJtD > div {
   display: inline-flex;
   border-radius: 20px;
-  height: 40px;
+  height: 38px;
   transition: 0.3s;
   cursor: pointer;
 }
@@ -3092,9 +3156,9 @@
 ._2xv6h {
   margin: auto;
   background-color: white;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--shadow-md);
 }
 
 ._29LEv {
@@ -3109,7 +3173,7 @@
 ._3rhMU,
 ._3tkpF {
   display: flex;
-  color: #9b9b9b;
+  color: var(--muted);
   padding: 0.6rem;
 }
 ._3rhMU > span,
@@ -3153,10 +3217,10 @@
 
 ._ooroJ {
   padding: 0.6rem;
-  color: #9b9b9b;
+  color: var(--muted);
   font-size: 20px;
   cursor: pointer;
-  transition: 0.3s;
+  transition: var(--transition);
 }
 
 ._2M-ho {
@@ -3171,7 +3235,7 @@
   display: inline-block;
   width: 36px;
   height: 36px;
-  background-color: #eeeeee;
+  background-color: var(--gray-light);
   color: var(--secondary-color);
   text-align: center;
   border-radius: 50%;
@@ -3179,15 +3243,16 @@
   cursor: pointer;
   margin: 4px;
   font-size: 13px;
+  transition: var(--transition);
 }
 
 ._2M-ho > tbody > tr > td > span._2QVVt {
   color: white;
-  background-color: var(--secondary-color);
+  background-color: var(--primary-color);
 }
 
 ._2M-ho > tbody > tr > td > span._YWe6I {
-  color: #eeeeee;
+  color: var(--muted);
   background-color: transparent;
   cursor: not-allowed;
 }
@@ -3214,19 +3279,19 @@
 
 ._3uQg0 {
   width: 100%;
-  border: solid 1px var(--secondary-color);
+  border: solid 1px var(--border);
   color: var(--secondary-color);
-  border-radius: 8px;
+  border-radius: var(--radius);
   padding: 0.7rem 1rem;
   font-weight: bold;
   margin-bottom: 0.4rem;
   text-align: center;
   cursor: pointer;
-  transition: 0.3s;
+  transition: var(--transition);
 }
 ._3uQg0._YWe6I {
-  border: solid 1px #eeeeee;
-  color: #eeeeee;
+  border: solid 1px var(--border);
+  color: var(--muted);
   cursor: not-allowed;
 }