@kne/system-layout 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/index.css

@@ -247,30 +247,60 @@
   content: '\e616';
 }
 
+.kne-system-layout_VtEb1 {
+  position: relative;
+  transform: translateZ(0);
+}
+
+.kne-system-layout_UMzfg {
+  overflow: auto;
+}
+
+:root {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100vh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100vh;
+}
+
+.kne-system-layout_VtEb1 {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100vh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100vh;
+}
+
 @media (max-width: 768px) {
-  ._sK89O {
+  .kne-system-layout_sK89O {
     width: 100%;
     padding: 0;
     overflow: hidden;
-    --page-height: 100vh;
-    --page-content-height: var(--page-height - 2px);
+    height: unset;
+    min-height: var(--window-height);
+    --page-height: 100dvh;
+    --page-content-height: var(--page-height);
+    --page-inner-height: calc(var(--page-height) - var(--nav-height) - var(--toolbar-height));
   }
-  ._sK89O._gyKfI {
-    --page-content-height: calc(var(--page-height) - 60px - 2px);
+  .kne-system-layout_sK89O.kne-system-layout_gyKfI {
+    --toolbar-height: 72px;
   }
-  ._sK89O ._-LpWn {
-    position: absolute;
+  .kne-system-layout_sK89O.kne-system-layout_X1wZG {
+    --nav-height: 48px;
+  }
+  .kne-system-layout_sK89O .kne-system-layout_-LpWn {
+    position: fixed;
+    top: 0;
     left: calc(var(--menu-min-width) * -1);
     z-index: 900;
     background: var(--background);
     height: 100%;
   }
-  ._sK89O ._-LpWn._G-zuN {
+  .kne-system-layout_sK89O .kne-system-layout_-LpWn.kne-system-layout_G-zuN {
     left: 0;
     box-shadow: 0 -2px 22.9px 0 rgba(78, 96, 139, 0.13);
   }
-  ._sK89O ._6TCwG {
-    position: absolute;
+  .kne-system-layout_sK89O .kne-system-layout_6TCwG {
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
@@ -281,59 +311,192 @@
     pointer-events: none;
     transition: opacity 300ms;
   }
-  ._sK89O ._6TCwG._G-zuN {
+  .kne-system-layout_sK89O .kne-system-layout_6TCwG.kne-system-layout_G-zuN {
     opacity: 1;
     pointer-events: auto;
   }
-  ._sK89O ._5qnw5 {
+  .kne-system-layout_sK89O .kne-system-layout_5qnw5 {
     display: none;
   }
-  ._sK89O ._HnwkM {
+  .kne-system-layout_sK89O .kne-system-layout_HnwkM {
     border-radius: 0;
+    border: 0;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    flex: 1;
+    min-height: 0;
+  }
+  .kne-system-layout_sK89O .kne-system-layout_nyAa2 {
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+  }
+  .kne-system-layout_sK89O .kne-system-layout_nyAa2 .ant-col {
+    height: 100%;
   }
-  ._sK89O ._h8PAW {
+  .kne-system-layout_sK89O .kne-system-layout_h8PAW {
     display: block;
   }
-  ._sK89O ._OM1Q2 {
+  .kne-system-layout_sK89O .kne-system-layout_OM1Q2 {
     padding: 0;
     overflow: visible !important;
+    height: unset;
+  }
+  .kne-system-layout_sK89O .kne-system-layout_OM1Q2.kne-system-layout_6gjkS {
+    overflow: visible !important;
   }
 }
-._sK89O {
-  --window-width: calc(100vw);
-  --window-height: calc(100vh);
-  --page-height: var(--window-height);
+.kne-system-layout_sK89O {
+  --window-width: var(--kne-viewport-width, 100vw);
+  --window-height: 100dvh;
+  --multiple: var(--safe-area-multiple, 1);
+  --safe-area-inset-top: calc(env(safe-area-inset-top) * var(--multiple));
+  --safe-area-inset-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
+  --nav-height: 0px;
+  --toolbar-height: 0px;
+  --page-height: calc(var(--window-height) - 48px);
   --page-content-height: calc(var(--page-height) - 48px);
+  --page-inner-height: calc(var(--page-height) - 48px - 60px);
   width: var(--window-width);
   height: var(--window-height);
   background: var(--background);
   box-sizing: border-box;
   padding: 24px 24px 24px 0;
   position: relative;
+  line-height: 1.4;
+  display: flex;
+  flex-direction: column;
 }
-._sK89O._udBgQ {
+.kne-system-layout_sK89O .system-max-width-900 {
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+}
+.kne-system-layout_sK89O .system-font-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.kne-system-layout_sK89O .system-font-title-primary {
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--primary-color);
+}
+.kne-system-layout_sK89O .system-font-sub-title {
+  font-weight: bold;
+}
+.kne-system-layout_sK89O .system-font-bold {
+  font-weight: bold;
+}
+.kne-system-layout_sK89O .system-font-description {
+  color: var(--font-color-grey);
+}
+.kne-system-layout_sK89O .scroller-bar {
+  background: transparent !important;
+  border-color: transparent !important;
+}
+.kne-system-layout_sK89O .scroller-bar .scroller-bar-inner {
+  background: #999 !important;
+  height: 40%;
+}
+.kne-system-layout_sK89O .ant-tag {
+  background: var(--primary-color-1);
+  border-radius: 11px;
+  color: var(--font-color-grey);
+}
+.kne-system-layout_sK89O .ant-segmented {
+  border: 1px solid #d1d5db;
+  border-radius: 17px;
+  background: transparent !important;
+}
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-item,
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-thumb {
+  border-radius: 14px;
+}
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-item.ant-segmented-item-selected,
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-thumb {
+  background: var(--primary-color) !important;
+  color: #fff !important;
+}
+.kne-system-layout_sK89O .ant-segmented .ant-segmented-item:after {
+  background: transparent !important;
+}
+.kne-system-layout_sK89O .filter .filter-title {
+  border-bottom: none;
+}
+.kne-system-layout_sK89O .react-form .ant-card {
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+.kne-system-layout_sK89O .max-width-info-page {
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+.kne-system-layout_sK89O .part.bordered {
+  background: rgba(255, 255, 255, 0.4392156863) !important;
+}
+.kne-system-layout_sK89O .part.bordered .part-title {
+  font-size: 16px;
+}
+.kne-system-layout_sK89O .ant-pagination-options-size-changer {
+  background: rgba(255, 255, 255, 0.4392156863) !important;
+}
+.kne-system-layout_sK89O .ant-tree {
+  background: rgba(255, 255, 255, 0.4392156863) !important;
+}
+.kne-system-layout_sK89O .ant-table,
+.kne-system-layout_sK89O .ant-table-placeholder {
+  background: rgba(255, 255, 255, 0.4392156863) !important;
+}
+.kne-system-layout_sK89O .ant-table-cell,
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell {
+  padding: 4px 8px;
+}
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-thead > tr > th.ant-table-cell {
+  padding: 6px 16px;
+  font-weight: 400 !important;
+  color: var(--font-color-grey);
+}
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-cell-fix {
+  background: transparent;
+}
+.kne-system-layout_sK89O .ant-table-wrapper .ant-table-cell-fix.ant-table-cell-fix-end-shadow-show, .kne-system-layout_sK89O .ant-table-wrapper .ant-table-cell-fix.ant-table-cell-fix-start-shadow-show {
+  background: var(--bg-color-grey);
+}
+.kne-system-layout_sK89O .ant-tooltip-container {
+  max-width: 400px;
+}
+.kne-system-layout_sK89O.kne-system-layout_udBgQ {
   width: 100%;
   padding: 0;
   overflow: hidden;
-  --page-height: 100vh;
-  --page-content-height: var(--page-height - 2px);
+  height: unset;
+  min-height: var(--window-height);
+  --page-height: 100dvh;
+  --page-content-height: var(--page-height);
+  --page-inner-height: calc(var(--page-height) - var(--nav-height) - var(--toolbar-height));
 }
-._sK89O._udBgQ._gyKfI {
-  --page-content-height: calc(var(--page-height) - 60px - 2px);
+.kne-system-layout_sK89O.kne-system-layout_udBgQ.kne-system-layout_gyKfI {
+  --toolbar-height: 72px;
 }
-._sK89O._udBgQ ._-LpWn {
-  position: absolute;
+.kne-system-layout_sK89O.kne-system-layout_udBgQ.kne-system-layout_X1wZG {
+  --nav-height: 48px;
+}
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_-LpWn {
+  position: fixed;
+  top: 0;
   left: calc(var(--menu-min-width) * -1);
   z-index: 900;
   background: var(--background);
   height: 100%;
 }
-._sK89O._udBgQ ._-LpWn._G-zuN {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_-LpWn.kne-system-layout_G-zuN {
   left: 0;
   box-shadow: 0 -2px 22.9px 0 rgba(78, 96, 139, 0.13);
 }
-._sK89O._udBgQ ._6TCwG {
-  position: absolute;
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_6TCwG {
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -344,103 +507,167 @@
   pointer-events: none;
   transition: opacity 300ms;
 }
-._sK89O._udBgQ ._6TCwG._G-zuN {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_6TCwG.kne-system-layout_G-zuN {
   opacity: 1;
   pointer-events: auto;
 }
-._sK89O._udBgQ ._5qnw5 {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_5qnw5 {
   display: none;
 }
-._sK89O._udBgQ ._HnwkM {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_HnwkM {
   border-radius: 0;
+  border: 0;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  flex: 1;
+  min-height: 0;
+}
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_nyAa2 {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
 }
-._sK89O._udBgQ ._h8PAW {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_nyAa2 .ant-col {
+  height: 100%;
+}
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_h8PAW {
   display: block;
 }
-._sK89O._udBgQ ._OM1Q2 {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_OM1Q2 {
   padding: 0;
   overflow: visible !important;
+  height: unset;
 }
-._sK89O ._h8PAW {
+.kne-system-layout_sK89O.kne-system-layout_udBgQ .kne-system-layout_OM1Q2.kne-system-layout_6gjkS {
+  overflow: visible !important;
+}
+.kne-system-layout_sK89O .kne-system-layout_h8PAW {
   display: none;
 }
-._sK89O .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
+.kne-system-layout_sK89O .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
   background: var(--primary-color-2);
   color: var(--primary-color);
 }
-._sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
+.kne-system-layout_sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled) {
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08);
   backdrop-filter: blur(10px);
 }
-._sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled):hover:not(:disabled):not(.ant-btn-loading) {
+.kne-system-layout_sK89O .ant-btn:not(.ant-btn-link):not(.ant-btn-dashed):not(.ant-btn-text):not(:disabled):hover:not(:disabled):not(.ant-btn-loading) {
   backdrop-filter: blur(40px) saturate(1.5) brightness(1.2);
   transform: scale(1.04);
 }
-._sK89O .ant-btn:active:not(.ant-btn-loading) {
+.kne-system-layout_sK89O .ant-btn:active:not(.ant-btn-loading) {
   box-shadow: none !important;
   transform: scale(1);
 }
-._sK89O .ant-btn:disabled {
+.kne-system-layout_sK89O .ant-btn:disabled {
   box-shadow: none;
   color: var(--font-color-disabled);
   background: rgba(17, 24, 39, 0.2);
 }
-._sK89O .ant-btn.ant-btn-primary:not(:disabled) {
+.kne-system-layout_sK89O .ant-btn.ant-btn-primary:not(:disabled) {
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08);
 }
-._sK89O .ant-btn.ant-btn-loading {
+.kne-system-layout_sK89O .ant-btn.ant-btn-loading {
   opacity: 0.6;
 }
-._sK89O .ant-btn {
+.kne-system-layout_sK89O .ant-btn {
   position: relative;
 }
-._sK89O .ant-btn .ant-btn-loading-icon {
+.kne-system-layout_sK89O .ant-btn .ant-btn-loading-icon {
   position: absolute;
 }
 
-._-LpWn {
+.kne-system-layout_-LpWn {
   flex: none;
   transition: width 0.3s;
   position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
-._-LpWn._G-zuN {
+.kne-system-layout_-LpWn.kne-system-layout_G-zuN {
   width: var(--menu-max-width);
 }
-._-LpWn:not(._G-zuN) {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) {
   width: var(--menu-min-width);
 }
-._-LpWn:not(._G-zuN) ._7wq3X {
-  padding: 0 16px;
-}
-._-LpWn:not(._G-zuN) ._-T-Dc {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) .kne-system-layout_-T-Dc {
   padding: 8px 16px;
   justify-content: center;
 }
-._-LpWn:not(._G-zuN) ._LOrmu {
+.kne-system-layout_-LpWn:not(.kne-system-layout_G-zuN) .kne-system-layout_LOrmu {
   padding: 12px 0;
+  margin: 0;
   border: none;
   background: none;
   justify-content: center;
 }
 
-._-T-Dc {
+.kne-system-layout_-cMpV {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--kne-viewport-height, 100dvh);
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 700;
+}
+
+.kne-system-layout_-LpWn.kne-system-layout_leFsD {
+  position: absolute;
+  flex: none;
+  top: 0;
+  left: calc(var(--menu-min-width, 84px) * -1);
+  z-index: 900;
+  height: 100%;
+  background: var(--background);
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+  transition: left 0.3s, width 0.3s;
+}
+.kne-system-layout_-LpWn.kne-system-layout_leFsD.kne-system-layout_G-zuN {
+  left: 0;
+  box-shadow: 0 -2px 22.9px 0 rgba(78, 96, 139, 0.13);
+}
+
+.kne-system-layout_6TCwG.kne-system-layout_leFsD {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 800;
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 300ms;
+}
+.kne-system-layout_6TCwG.kne-system-layout_leFsD.kne-system-layout_G-zuN {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.kne-system-layout_-T-Dc {
   padding: 8px 24px;
   display: flex;
   justify-content: flex-start;
 }
-._-T-Dc img {
+.kne-system-layout_-T-Dc img {
   height: 24px !important;
   object-fit: contain;
   max-width: 100%;
 }
 
-._2cRWf {
+.kne-system-layout_2cRWf {
   display: flex;
   align-items: center;
 }
 
-._5D-Oq {
+.kne-system-layout_5D-Oq {
   position: absolute;
   right: -10px;
   top: 20px;
@@ -453,11 +680,11 @@
   justify-content: center;
   transition: transform 0.3s;
 }
-._5D-Oq:hover {
+.kne-system-layout_5D-Oq:hover {
   transform: scale(1.2);
 }
 
-._p4eOE {
+.kne-system-layout_p4eOE {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -466,40 +693,49 @@
   transition: opacity 0.5s;
 }
 
-._8dzE7 {
+.kne-system-layout_8dzE7 {
   transition: transform 0.3s;
 }
-._8dzE7.is-closed {
+.kne-system-layout_8dzE7.is-closed {
   transform: scaleX(-1);
 }
 
-._7wq3X {
-  padding: 0 8px 0 16px;
+.kne-system-layout_7wq3X {
   margin-top: 12px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+.kne-system-layout_7wq3X:has(.kne-system-layout_5qnw5) .kne-system-layout_8gqbZ {
+  padding-bottom: 56px;
 }
 
-._LOrmu {
+.kne-system-layout_LOrmu {
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(10px);
   min-height: 40px;
   padding: 12px 16px;
+  margin: 0 8px 0 16px;
   display: flex;
   justify-content: flex-start;
   overflow: hidden;
 }
 
-._b7XeQ {
+.kne-system-layout_b7XeQ {
   font-weight: 500;
 }
 
-._U0YTk {
+.kne-system-layout_U0YTk {
   font-size: 12px;
   color: var(--font-color-grey);
 }
 
-._HnwkM {
+.kne-system-layout_HnwkM {
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 100%);
@@ -508,11 +744,13 @@
   min-width: 0;
 }
 
-._8gqbZ {
+.kne-system-layout_8gqbZ {
   margin-top: 16px;
+  flex: 1;
+  min-height: 0;
 }
 
-._5qnw5 {
+.kne-system-layout_5qnw5 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -528,13 +766,13 @@
   cursor: pointer;
   transition: all 0.3s;
 }
-._5qnw5:hover {
+.kne-system-layout_5qnw5:hover {
   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(40px) saturate(1.5);
   transform: scale(1.1);
 }
 
-._UAJc- {
+.kne-system-layout_UAJc- {
   --container-width: 400px;
   --container-height: 400px;
   --container-base-width: var(--container-width);
@@ -547,10 +785,13 @@
   position: absolute;
   bottom: 24px;
   left: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08);
   transition: box-shadow 0.3s;
 }
-@keyframes _VjIWn {
+@keyframes kne-system-layout_VjIWn {
   0%, 100% {
     transform: scale(1);
   }
@@ -558,24 +799,104 @@
     transform: scale(1.02, 0.98);
   }
 }
-._UAJc-:hover {
-  animation: _VjIWn 0.4s ease-out;
+.kne-system-layout_UAJc-:hover {
+  animation: kne-system-layout_VjIWn 0.4s ease-out;
   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(10px) saturate(1.5);
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
 }
+.kne-system-layout_UAJc-.kne-system-layout_tiNSQ {
+  position: absolute;
+  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  box-shadow: none;
+}
+.kne-system-layout_UAJc-.kne-system-layout_tiNSQ.kne-system-layout_UxwXs {
+  position: fixed;
+}
+.kne-system-layout_UAJc-.kne-system-layout_tiNSQ:hover {
+  animation: none;
+  box-shadow: none;
+}
+.kne-system-layout_UAJc-.kne-system-layout_tiNSQ .kne-system-layout_33Tja {
+  flex: 0 0 auto;
+  padding-top: var(--safe-area-inset-top, 0px);
+  height: calc(58px + var(--safe-area-inset-top, 0px));
+}
+.kne-system-layout_UAJc-.kne-system-layout_tiNSQ .kne-system-layout_YmBhl {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto;
+  padding-bottom: var(--safe-area-inset-bottom, 0px);
+}
+
+.kne-system-layout_Nt0Rj {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--kne-viewport-height, 100dvh);
+  pointer-events: none;
+}
+.kne-system-layout_Nt0Rj .kne-system-layout_ln2Ag,
+.kne-system-layout_Nt0Rj .kne-system-layout_UAJc- {
+  pointer-events: auto;
+}
+
+.kne-system-layout_ln2Ag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  right: 16px;
+  bottom: calc(var(--toolbar-height, 0px) + var(--safe-area-inset-bottom, 0px) + 28px);
+  z-index: 650;
+  padding: 12px;
+  font-size: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(40px);
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1), 0 8px 24px 0 rgba(0, 0, 0, 0.12);
+  cursor: grab;
+  touch-action: none;
+  -webkit-user-select: none;
+          user-select: none;
+  transition: background 0.3s;
+}
+.kne-system-layout_ln2Ag.kne-system-layout_dWwHX {
+  position: absolute;
+}
+.kne-system-layout_ln2Ag.kne-system-layout_UxwXs {
+  position: fixed;
+}
+.kne-system-layout_ln2Ag:active {
+  cursor: grabbing;
+  background: rgba(255, 255, 255, 0.8);
+}
 
-._I7Anv {
+.kne-system-layout_I7Anv {
   padding: 24px 0 24px 24px;
 }
 
-._UhsFd {
+.kne-system-layout_UhsFd {
   background: rgba(255, 255, 255, 0.4);
   border-radius: 8px;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   transition: box-shadow 0.3s;
 }
-@keyframes _H7slV {
+@keyframes kne-system-layout_H7slV {
   0%, 100% {
     transform: scale(1, 1);
   }
@@ -583,58 +904,114 @@
     transform: scale(1.01, 0.99);
   }
 }
-._UhsFd:hover {
+.kne-system-layout_UhsFd:hover {
   backdrop-filter: blur(40px) saturate(1.2);
-  animation: _H7slV 0.4s ease-out;
+  animation: kne-system-layout_H7slV 0.4s ease-out;
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05), 0 15px 30px 0 rgba(0, 0, 0, 0.08), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
 }
 
-._2mdNn {
-  --container-height: calc(var(--page-content-height) - 58px);
-  height: var(--container-height);
+.kne-system-layout_YmBhl,
+.kne-system-layout_2mdNn {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+.kne-system-layout_YmBhl::-webkit-scrollbar,
+.kne-system-layout_2mdNn::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+.kne-system-layout_YmBhl::-webkit-scrollbar-thumb,
+.kne-system-layout_2mdNn::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 999px;
+}
+.kne-system-layout_YmBhl::-webkit-scrollbar-track,
+.kne-system-layout_2mdNn::-webkit-scrollbar-track {
+  background: transparent;
+}
+.kne-system-layout_YmBhl *::-webkit-scrollbar,
+.kne-system-layout_2mdNn *::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+.kne-system-layout_YmBhl *::-webkit-scrollbar-thumb,
+.kne-system-layout_2mdNn *::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 999px;
+}
+.kne-system-layout_YmBhl *::-webkit-scrollbar-track,
+.kne-system-layout_2mdNn *::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-._OM1Q2 {
-  --container-height: var(--page-content-height);
-  height: var(--container-height);
+.kne-system-layout_OM1Q2 {
+  --container-height: calc(var(--page-content-height) - 48px);
   padding: 24px;
+  box-sizing: border-box;
+  height: var(--page-height);
+  width: 100%;
+  max-width: 100%;
 }
-._OM1Q2._6gjkS {
+.kne-system-layout_OM1Q2.kne-system-layout_6gjkS {
   overflow-y: auto;
 }
 
-._nyAa2 {
+.kne-system-layout_nyAa2 {
+  width: 100%;
+}
+.kne-system-layout_nyAa2 .kne-responsive-container {
+  container-type: inline-size;
+  container-name: kne-responsive;
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
 }
 
-._33Tja {
+.kne-system-layout_33Tja {
+  flex: 0 0 auto;
   height: 58px;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
 }
-._33Tja .btn {
+.kne-system-layout_33Tja .btn {
   font-size: 24px;
   color: var(--font-color-grey);
   cursor: pointer;
 }
-
-._YmBhl {
-  --container-height: calc(var(--container-base-height) - 58px);
-  height: var(--container-height);
+.kne-system-layout_dVWvr {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 4px 0;
+}
+.kne-system-layout_dVWvr .rc-virtual-list-holder-inner {
+  padding: 0 8px 0 16px;
+}
+.kne-system-layout_dVWvr .rc-virtual-list-scrollbar {
+  width: 4px !important;
 }
-._Rfzv4 {
+.kne-system-layout_dVWvr .rc-virtual-list-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15) !important;
+}
+
+.kne-system-layout_Rfzv4 {
   font-size: 12px;
   color: var(--font-color-grey);
   line-height: 24px;
   padding: 12px;
 }
 
-._qoDtD {
+.kne-system-layout_qoDtD {
   color: var(--font-color-grey);
 }
 
-._socoO {
+.kne-system-layout_socoO {
   opacity: 0.6;
   background: var(--font-color-grey-3);
   height: 1px;
@@ -642,133 +1019,454 @@
   margin: 8px auto;
 }
 
-._Xa-2h {
+.kne-system-layout_Xa-2h {
   line-height: 24px;
   padding: 12px;
   margin: 2px 0;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-._Xa-2h:hover {
+.kne-system-layout_Xa-2h:hover {
   backdrop-filter: brightness(1.1);
   transform: scale(1.02);
 }
-._Xa-2h.is-active {
+.kne-system-layout_Xa-2h.is-active {
   background: linear-gradient(270deg, rgba(255, 255, 255, 0) -4%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0.3) 100%);
   box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.05);
 }
-._Xa-2h.is-active ._qoDtD {
+.kne-system-layout_Xa-2h.is-active .kne-system-layout_qoDtD {
   color: var(--primary-color);
 }
-._Xa-2h.is-closed {
+.kne-system-layout_Xa-2h.is-closed {
   display: flex;
   justify-content: center;
 }
-._Xa-2h.is-closed.is-active {
+.kne-system-layout_Xa-2h.is-closed.is-active {
   background: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(40px) saturate(1.5);
 }
-._Xa-2h.is-closed ._qoDtD {
+.kne-system-layout_Xa-2h.is-closed .kne-system-layout_qoDtD {
   font-size: 24px;
 }
-._SLK-0 {
-  height: 60px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 100%);
-  backdrop-filter: blur(10px);
+.kne-system-layout_SLK-0 {
+  background: transparent;
 }
 
-._GTQvM {
-  height: 60px;
-  position: fixed;
-  z-index: 600;
-  bottom: 0;
+.kne-system-layout_RgKpk {
+  position: static;
+  pointer-events: none;
+}
+
+.kne-system-layout_VEMgn {
+  position: absolute;
+  top: 0;
   left: 0;
-  right: 0;
-  border-radius: 8px 8px 0 0;
-  background: rgba(249, 249, 249, 0.75);
-  box-shadow: 0 -2px 22.9px 0 rgba(78, 96, 139, 0.13);
-  backdrop-filter: blur(10px);
+  width: 100%;
+  height: var(--kne-viewport-height, 100dvh);
+  pointer-events: none;
+  z-index: 600;
+}
+
+.kne-system-layout_GTQvM {
+  height: 72px;
+  z-index: 600;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 4px 16px 0 rgba(78, 96, 139, 0.18), 0 2px 6px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  padding: 6px 8px;
+  box-sizing: border-box;
+  transition: transform 0.3s ease, width 0.3s ease, background 0.3s ease, padding 0.3s ease;
+}
+.kne-system-layout_GTQvM.kne-system-layout_c6f0m {
+  position: fixed;
+  bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+  left: 16px;
+  right: 16px;
+  pointer-events: auto;
+}
+.kne-system-layout_GTQvM.kne-system-layout_3ctCY {
+  position: absolute;
+  bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+  left: 16px;
+  right: 16px;
+  pointer-events: auto;
+}
+.kne-system-layout_GTQvM.is-scrolling {
+  width: calc((var(--kne-viewport-width, 100vw) - 32px) / var(--toolbar-count, 4));
+  right: auto;
+  transform: scale(0.65);
+  transform-origin: left bottom;
+  padding: 8px;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  background: rgba(255, 255, 255, 0.1);
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_fAZ3n {
+  padding: 0 !important;
+  flex: none !important;
+  width: 100%;
+  height: 100%;
+  gap: 0 !important;
+  order: 2;
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_fAZ3n .kne-system-layout_qOB9o {
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_fAZ3n:not(.kne-system-layout_ss5zk) {
+  order: 1;
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_h48es {
+  display: none;
+}
+.kne-system-layout_GTQvM.is-scrolling .kne-system-layout_1s-bc {
+  left: 8px !important;
+  right: 8px;
+  width: auto !important;
+}
+.kne-system-layout_GTQvM.is-clicked {
+  animation: kne-system-layout_Ys3yu 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-._fAZ3n {
+@keyframes kne-system-layout_Ys3yu {
+  0% {
+    transform: scaleX(1) scaleY(1);
+    filter: brightness(1);
+  }
+  25% {
+    transform: scaleX(0.98) scaleY(1.015);
+    filter: brightness(1.15);
+  }
+  55% {
+    transform: scaleX(1.008) scaleY(0.995);
+    filter: brightness(1.05);
+  }
+  100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+}
+.kne-system-layout_fAZ3n {
   cursor: pointer;
+  border-radius: 999px;
+  padding: 4px 12px;
+  box-sizing: border-box;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+  transition: opacity 0.2s ease;
+  overflow: hidden;
+}
+.kne-system-layout_fAZ3n .kne-system-layout_qOB9o,
+.kne-system-layout_fAZ3n .kne-system-layout_h48es {
+  color: #333;
+  transition: color 0.5s ease;
 }
-._fAZ3n.is-active ._qOB9o,
-._fAZ3n.is-active ._h48es {
+.kne-system-layout_fAZ3n.is-active .kne-system-layout_qOB9o,
+.kne-system-layout_fAZ3n.is-active .kne-system-layout_h48es {
   color: var(--primary-color);
 }
+.kne-system-layout_fAZ3n.kne-system-layout_ss5zk {
+  opacity: 0;
+  pointer-events: none;
+  flex: 0 !important;
+  width: 0;
+  overflow: hidden;
+  padding: 0;
+}
 
-._fAZ3n ._qOB9o {
+.kne-system-layout_1s-bc {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  border-radius: 999px;
+  background: rgba(120, 120, 120, 0.22);
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease;
+  z-index: 0;
+  pointer-events: none;
+  will-change: left, width, transform;
+}
+
+.kne-system-layout_fAZ3n .kne-system-layout_qOB9o {
   width: 24px;
   height: 24px;
   font-size: 24px;
-  margin-bottom: 8px;
+  line-height: 1;
 }
 
-._h48es {
+.kne-system-layout_h48es {
   font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 @media (max-width: 768px) {
-  ._c1kXt {
+  .kne-system-layout_c1kXt {
     gap: 0 !important;
   }
-  ._c1kXt ._h-YXH {
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH {
     height: 48px;
     padding: 0 16px;
     background: #ffffff;
+    margin-bottom: 0;
+    position: fixed;
+    top: var(--safe-area-inset-top, 0px);
+    left: 0;
+    right: 0;
+    z-index: 600;
+    transition: height 0.3s ease, padding 0.3s ease, background 0.3s ease, margin 0.3s ease, top 0.3s ease;
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy {
+    height: 36px;
+    padding: 0;
+    background: transparent;
+    margin: 8px 16px;
+    top: calc(8px + var(--safe-area-inset-top, 0px));
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_jhcGo {
+    border-radius: 999px;
+    padding: 0 12px;
+    height: 36px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    box-shadow: 0 8px 32px 0 rgba(78, 96, 139, 0.18), 0 2px 8px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_jhcGo:active {
+    animation: kne-system-layout_Ps1FA 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_mKsLu {
+    border-radius: 999px;
+    padding: 0 8px;
+    height: 36px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    box-shadow: 0 8px 32px 0 rgba(78, 96, 139, 0.18), 0 2px 8px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
   }
-  ._c1kXt ._IOVGr {
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_mKsLu:active {
+    animation: kne-system-layout_Ps1FA 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_IOVGr {
+    font-size: 14px;
+    color: #333;
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .ant-btn {
+    color: #333 !important;
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_h-YXH.kne-system-layout_dEXMy .ant-btn:hover {
+    color: #555 !important;
+  }
+  @keyframes kne-system-layout_Ps1FA {
+    0% {
+      transform: scaleX(1) scaleY(1);
+      filter: brightness(1);
+    }
+    25% {
+      transform: scaleX(0.97) scaleY(1.03);
+      filter: brightness(1.2);
+    }
+    55% {
+      transform: scaleX(1.015) scaleY(0.99);
+      filter: brightness(1.08);
+    }
+    100% {
+      transform: scale(1);
+      filter: brightness(1);
+    }
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_IOVGr {
     font-size: 16px;
     flex: 1;
     color: var(--primary-color);
+    transition: font-size 0.3s ease, color 0.3s ease;
   }
-  ._c1kXt ._mKsLu {
+  .kne-system-layout_c1kXt .kne-system-layout_mKsLu {
     flex: none;
   }
-  ._c1kXt ._wHWje {
+  .kne-system-layout_c1kXt .kne-system-layout_Y1y7o {
+    padding-top: calc(52px + var(--safe-area-inset-top, 0px));
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_wHWje {
+    box-sizing: border-box;
+    --content-height: calc(var(--page-inner-height) - 24px);
     padding: 12px;
-    --content-height: calc(var(--page-content-height) - 48px - 24px);
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_wHWje:after {
+    content: "";
+    display: block;
+    height: calc(var(--toolbar-height) + 48px + var(--safe-area-inset-bottom));
+  }
+  .kne-system-layout_c1kXt .kne-system-layout_wHWje.kne-system-layout_tBnAD {
+    --content-height: var(--page-inner-height);
+    padding: 0;
   }
 }
-._c1kXt._yRZMx {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx {
   gap: 0 !important;
 }
-._c1kXt._yRZMx ._h-YXH {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH {
   height: 48px;
   padding: 0 16px;
   background: #ffffff;
+  margin-bottom: 0;
+  position: fixed;
+  top: var(--safe-area-inset-top, 0px);
+  left: 0;
+  right: 0;
+  z-index: 600;
+  transition: height 0.3s ease, padding 0.3s ease, background 0.3s ease, margin 0.3s ease, top 0.3s ease;
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy {
+  height: 36px;
+  padding: 0;
+  background: transparent;
+  margin: 8px 16px;
+  top: calc(8px + var(--safe-area-inset-top, 0px));
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_jhcGo {
+  border-radius: 999px;
+  padding: 0 12px;
+  height: 36px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 8px 32px 0 rgba(78, 96, 139, 0.18), 0 2px 8px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
-._c1kXt._yRZMx ._IOVGr {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_jhcGo:active {
+  animation: kne-system-layout_Ps1FA 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_mKsLu {
+  border-radius: 999px;
+  padding: 0 8px;
+  height: 36px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 8px 32px 0 rgba(78, 96, 139, 0.18), 0 2px 8px 0 rgba(78, 96, 139, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_mKsLu:active {
+  animation: kne-system-layout_Ps1FA 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .kne-system-layout_IOVGr {
+  font-size: 14px;
+  color: #333;
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .ant-btn {
+  color: #333 !important;
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_h-YXH.kne-system-layout_dEXMy .ant-btn:hover {
+  color: #555 !important;
+}
+@keyframes kne-system-layout_Ps1FA {
+  0% {
+    transform: scaleX(1) scaleY(1);
+    filter: brightness(1);
+  }
+  25% {
+    transform: scaleX(0.97) scaleY(1.03);
+    filter: brightness(1.2);
+  }
+  55% {
+    transform: scaleX(1.015) scaleY(0.99);
+    filter: brightness(1.08);
+  }
+  100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_IOVGr {
   font-size: 16px;
   flex: 1;
   color: var(--primary-color);
+  transition: font-size 0.3s ease, color 0.3s ease;
 }
-._c1kXt._yRZMx ._mKsLu {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_mKsLu {
   flex: none;
 }
-._c1kXt._yRZMx ._wHWje {
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_Y1y7o {
+  padding-top: calc(52px + var(--safe-area-inset-top, 0px));
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_wHWje {
+  box-sizing: border-box;
+  --content-height: calc(var(--page-inner-height) - 24px);
   padding: 12px;
-  --content-height: calc(var(--page-content-height) - 48px - 24px);
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_wHWje:after {
+  content: "";
+  display: block;
+  height: calc(var(--toolbar-height) + 48px + var(--safe-area-inset-bottom));
+}
+.kne-system-layout_c1kXt.kne-system-layout_yRZMx .kne-system-layout_wHWje.kne-system-layout_tBnAD {
+  --content-height: var(--page-inner-height);
+  padding: 0;
 }
 
-._IOVGr {
+.kne-system-layout_jhcGo {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kne-system-layout_h-YXH {
+  margin-bottom: 12px;
+}
+
+.kne-system-layout_IOVGr {
   font-size: 20px;
   font-weight: 500;
 }
 
-._wHWje {
-  --content-height: calc(var(--page-content-height) - 48px - 56px);
-  min-height: var(--content-height);
+.kne-system-layout_wHWje {
+  --content-height: var(--page-inner-height);
+  min-height: calc(var(--page-inner-height) + var(--toolbar-height));
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
-._mKsLu {
+.kne-system-layout_mKsLu {
   display: flex;
   justify-content: flex-end;
   flex: 1;
+  max-width: 50%;
+}
+
+.kne-system-layout_vcf3J {
+  width: 100%;
+  background: #fff;
+  padding: 12px;
+  border-radius: 12px;
+}
+
+.kne-system-layout_Y1y7o {
+  display: block;
+  width: 100%;
+  padding-top: var(--safe-area-inset-top);
+}
+
+.kne-system-layout_vXk1s {
+  display: block;
+  width: 100%;
+  padding-bottom: var(--safe-area-inset-bottom);
 }
 
-._07Mna {
+.kne-system-layout_07Mna {
   display: block;
   transform: rotate(180deg);
 }