html,
body {
  height: 100%;
}

body.lnlab-key-page {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: #1d1d1f;
  background:
    radial-gradient(circle at top right, rgba(0, 113, 227, 0.18), transparent 28%),
    radial-gradient(circle at bottom left, rgba(255, 45, 85, 0.12), transparent 24%),
    linear-gradient(180deg, #eef2f7 0%, #f5f5f7 52%, #eceef3 100%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lnlab-key-main {
  height: 100vh;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

.my-container {
  height: 100% !important;
  background: transparent !important;
}

.my-container > .flex-center.w-full.text-white {
  color: #1d1d1f !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(29, 29, 31, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin: 16px !important;
  text-align: center;
  backdrop-filter: blur(18px);
}

.left-nav {
  border-right: 1px solid rgba(29, 29, 31, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 245, 247, 0.82)) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.content,
.index-box-content {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(245, 245, 247, 0.88)) !important;
}

.index-box {
  border: 1px solid rgba(29, 29, 31, 0.08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.index-box-item {
  color: #1d1d1f !important;
  font-weight: 600 !important;
}

.index-box-item:hover {
  color: #0071e3 !important;
}

.bottom-bar {
  background: #0071e3 !important;
  box-shadow: 0 4px 10px rgba(0, 113, 227, 0.24) !important;
}

.index-box-content .text-white {
  color: #1d1d1f !important;
}

.index-box-content .text-white h1.text-center {
  color: #1d1d1f !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
}

.index-box-content .text-white h1.text-center + h1.text-center {
  color: #86868b !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  margin-top: 10px;
}

.content .bg-partial-main-bg-color {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(29, 29, 31, 0.08) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(18px) !important;
}

.content .bg-partial-main-bg-color:hover {
  border-color: rgba(0, 113, 227, 0.24) !important;
}

.left-img-item {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(29, 29, 31, 0.08) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.border-right-1,
.border-line-color {
  border-color: rgba(29, 29, 31, 0.08) !important;
}

.side-menu-item {
  border-radius: 10px !important;
  color: #86868b !important;
  font-weight: 600 !important;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.side-menu-item:hover {
  transform: translateY(-1px);
  background: rgba(0, 113, 227, 0.08) !important;
  color: #0071e3 !important;
}

.side-menu-item:active {
  transform: scale(0.96);
}

.bg-menu-active-color,
.side-menu-item.bg-menu-active-color {
  background: linear-gradient(180deg, #0a84ff 0%, #0071e3 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.common-btn {
  border-radius: 10px !important;
  background: linear-gradient(180deg, #0a84ff 0%, #0071e3 100%) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.15s ease, filter 0.2s ease !important;
}

.common-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.common-btn:active {
  transform: scale(0.96);
}

.common-key {
  border: 1px solid rgba(0, 113, 227, 0.12) !important;
  background: linear-gradient(180deg, #dfe7f2 0%, #d7e2ef 100%) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.common-key-inner {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%) !important;
  color: #1d1d1f !important;
}

.mini-keyboard-box,
.mini-keyboard-box5,
.index-box-content > div,
.abouts-box,
.about-box,
.func-box,
.keyboard-box,
.mouse-box {
  border: 1px solid rgba(29, 29, 31, 0.08) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.text-\[\#707070\],
.text-main-font-color,
.text-\[\#808080\] {
  color: #86868b !important;
}

.my-container .el-input__wrapper,
.my-container .el-textarea__inner,
.my-container .el-select__wrapper {
  border: 1px solid rgba(0, 113, 227, 0.14) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: none !important;
}

.my-container .el-input__wrapper.is-focus,
.my-container .el-select__wrapper.is-focused,
.my-container .el-textarea__inner:focus {
  border-color: rgba(0, 113, 227, 0.42) !important;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
}

.lnlab-key-local-logo {
  width: 132px;
  max-height: 44px;
  height: auto;
  object-fit: contain;
}

.lnlab-key-local-mark {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #86868b;
  text-transform: uppercase;
}