:root {
  --ui-accent-rgb: 194, 178, 128;
  --ui-shell-bg: radial-gradient(circle at top left, #f8f4ef 0%, #f4f8fb 42%, #eef6fb 100%);
  --ui-panel-bg: rgba(255, 255, 255, 0.92);
  --ui-panel-border: rgba(var(--ui-accent-rgb), 0.22);
  --ui-panel-shadow: 0 10px 28px rgba(var(--ui-accent-rgb), 0.14);
  --ui-accent: rgb(var(--ui-accent-rgb));
  --ui-text-main: #1a2940;
  --el-color-primary: rgb(var(--ui-accent-rgb)) !important;
  --el-color-primary-dark-2: rgb(174, 160, 112) !important;
  --el-color-primary-light-3: rgba(var(--ui-accent-rgb), 0.82) !important;
  --el-color-primary-light-5: rgba(var(--ui-accent-rgb), 0.62) !important;
  --el-color-primary-light-7: rgba(var(--ui-accent-rgb), 0.40) !important;
  --el-color-primary-light-8: rgba(var(--ui-accent-rgb), 0.28) !important;
  --el-color-primary-light-9: rgba(var(--ui-accent-rgb), 0.18) !important;
}

html.dark {
  --ui-accent-rgb: 111, 78, 55;
  --ui-shell-bg: radial-gradient(circle at top left, #1f1815 0%, #171210 44%, #100d0b 100%);
  --ui-panel-bg: rgba(30, 22, 19, 0.88);
  --ui-panel-border: rgba(var(--ui-accent-rgb), 0.26);
  --ui-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  --ui-text-main: #f0e5db;
  --el-color-primary: rgb(var(--ui-accent-rgb)) !important;
  --el-color-primary-dark-2: rgb(133, 97, 72) !important;
  --el-color-primary-light-3: rgba(var(--ui-accent-rgb), 0.82) !important;
  --el-color-primary-light-5: rgba(var(--ui-accent-rgb), 0.62) !important;
  --el-color-primary-light-7: rgba(var(--ui-accent-rgb), 0.42) !important;
  --el-color-primary-light-8: rgba(var(--ui-accent-rgb), 0.30) !important;
  --el-color-primary-light-9: rgba(var(--ui-accent-rgb), 0.18) !important;
}

html,
body {
  background: var(--ui-shell-bg) !important;
  color: var(--ui-text-main);
}

body {
  scroll-behavior: smooth;
}

body * {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ui-accent-rgb), 0.45) transparent;
}

body *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body *::-webkit-scrollbar-thumb {
  background: rgba(var(--ui-accent-rgb), 0.35);
  border-radius: 999px;
}

#app {
  color: var(--ui-text-main);
}

.el-card,
.el-dialog,
.el-drawer,
.el-popover,
.el-dropdown-menu,
.el-select-dropdown,
.el-message,
.el-message-box,
.el-input__wrapper,
.el-input-group__append,
.el-input-group__prepend {
  background: var(--ui-panel-bg) !important;
  border: 1px solid var(--ui-panel-border) !important;
  box-shadow: var(--ui-panel-shadow) !important;
}

.el-button,
button,
[role='button'] {
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease !important;
}

.el-button:hover,
button:hover,
[role='button']:hover {
  transform: translateY(-1px);
}

.el-button--primary {
  box-shadow: 0 10px 22px rgba(var(--ui-accent-rgb), 0.22) !important;
}

.el-input__wrapper,
.el-textarea__inner,
.el-input__inner,
input,
textarea {
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
}

html.dark .el-input__wrapper,
html.dark .el-textarea__inner,
html.dark .el-input__inner,
html.dark input,
html.dark textarea {
  background: rgba(38, 29, 25, 0.92) !important;
  color: var(--ui-text-main) !important;
}

img,
video {
  border-radius: 14px;
}

[data-codex-hidden='true'] {
  display: none !important;
}

@media (max-width: 768px) {
  .el-card,
  .el-dialog,
  .el-drawer,
  .el-popover,
  .el-dropdown-menu,
  .el-select-dropdown,
  .el-message,
  .el-message-box {
    border-radius: 18px !important;
  }
}