/* 画图匠(LitePaint) - 自定义可爱风格 */

/* 主体背景和颜色 */
body.theme-light {
  --background-color: #f9f3f8;
  --text-color: #5a4764;
  --menu-background-color: #fde8fa;
  --menu-text-color: #7a5a8c;
  --menu-border-color: #e2c6e6;
  --sidebar-background-color: #ffeef8;
  --block-background-color: #fff6fd;
  --block-border-color: #e9c2e2;
  --block-header-background-color: #ffd6f5;
  --active-button-color: #cf93e6;
  --button-background: #ffd6f5;
  --button-hover-background: #f7a4e3;
  --logo-color: #9e66b3;
}

body.theme-dark {
  --background-color: #2d2438;
  --text-color: #f4e9ff;
  --menu-background-color: #3a2e4a;
  --menu-text-color: #e6d1ff;
  --menu-border-color: #594973;
  --sidebar-background-color: #332a43;
  --block-background-color: #3a2e4a;
  --block-border-color: #594973;
  --block-header-background-color: #443659;
  --active-button-color: #a96fd4;
  --button-background: #443659;
  --button-hover-background: #6b4b8a;
  --logo-color: #d5adff;
}

body.theme-green {
  --background-color: #f1f8e9;
  --text-color: #33691e;
  --menu-background-color: #e8f5e9;
  --menu-text-color: #2e7d32;
  --menu-border-color: #a5d6a7;
  --sidebar-background-color: #e8f5e9;
  --block-background-color: #f1f8e9;
  --block-border-color: #c5e1a5;
  --block-header-background-color: #dcedc8;
  --active-button-color: #81c784;
  --button-background: #dcedc8;
  --button-hover-background: #aed581;
  --logo-color: #558b2f;
}

/* 应用自定义样式 */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: "Nunito", "Microsoft Yahei", sans-serif;
}

/* 导航栏 */
.main_menu {
  background-color: var(--menu-background-color);
  border-bottom: 2px solid var(--menu-border-color);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.main_menu a {
  color: var(--menu-text-color);
  font-weight: 600;
  transition: all 0.3s ease;
  border-radius: 5px;
}

.main_menu a:hover {
  background-color: var(--button-hover-background);
  color: white;
}

.main_menu .active {
  background-color: var(--active-button-color);
  color: white;
}

.submenu {
  background-color: var(--menu-background-color);
  border-bottom: 2px solid var(--menu-border-color);
  padding: 5px 10px;
  border-radius: 0 0 10px 10px;
}

.submenu .logo {
  color: var(--logo-color);
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.submenu .logo:hover {
  transform: scale(1.05);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* 侧边栏 */
.sidebar_left, .sidebar_right {
  background-color: var(--sidebar-background-color);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 块样式 */
.block {
  background-color: var(--block-background-color);
  border: 1px solid var(--block-border-color);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  overflow: hidden;
}

.block h2 {
  background-color: var(--block-header-background-color);
  color: var(--text-color);
  padding: 8px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--block-border-color);
  border-radius: 10px 10px 0 0;
  transition: all 0.3s ease;
}

.block h2:hover {
  background-color: var(--button-hover-background);
  color: white;
}

.block .content {
  padding: 10px;
}

/* 工具按钮 */
#tools_container button {
  background-color: var(--button-background);
  color: var(--text-color);
  border: 1px solid var(--block-border-color);
  border-radius: 8px;
  margin: 3px;
  transition: all 0.3s ease;
}

#tools_container button:hover {
  background-color: var(--button-hover-background);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#tools_container button.active {
  background-color: var(--active-button-color);
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 画布区域 */
#canvas_wrapper {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.transparent-grid {
  border-radius: 10px;
}

/* 颜色选择器 */
.main_color_picker {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--block-border-color);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--active-button-color);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* 移动菜单按钮 */
.mobile_menu button {
  background-color: var(--button-background);
  border: 1px solid var(--block-border-color);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.mobile_menu button:hover {
  background-color: var(--button-hover-background);
  transform: rotate(180deg);
}

/* 层面板 */
.layers .content {
  border-radius: 8px;
  overflow: hidden;
}

.layers .item {
  border-radius: 6px;
  transition: all 0.3s ease;
  margin-bottom: 3px;
}

.layers .item:hover {
  transform: translateX(3px);
}

.layers .item.active {
  background-color: var(--active-button-color);
  color: white;
}

/* 添加可爱的加载动画 */
.loading:after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--active-button-color);
  border-color: var(--active-button-color) transparent;
  animation: loading 1.2s linear infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 弹出框美化 */
#popups .deleteme {
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--block-border-color);
  overflow: hidden;
}

#popups .button {
  border-radius: 8px;
  transition: all 0.3s ease;
}

#popups .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 添加一些微动画 */
.wrapper {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 撤销按钮美化 */
.undo_button {
  background-color: var(--button-background);
  border: 1px solid var(--block-border-color);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.undo_button:hover {
  background-color: var(--button-hover-background);
  transform: translateY(-2px);
}

/* 美化图层详情区域 */
.details .row {
  border-radius: 6px;
  padding: 5px;
  margin-bottom: 2px;
}

.details .row:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.03);
}

/* 优化滚动条样式 */
.sidebar_right::-webkit-scrollbar,
.details-content::-webkit-scrollbar {
  width: 6px;
}

.sidebar_right::-webkit-scrollbar-track,
.details-content::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

.sidebar_right::-webkit-scrollbar-thumb,
.details-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.sidebar_right::-webkit-scrollbar-thumb:hover,
.details-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 确保图层详情面板在移动设备上的滚动效果 */
@media (max-width: 768px) {
  .sidebar_right.active .details-content {
    overflow-y: auto;
    max-height: 40vh;
    -webkit-overflow-scrolling: touch; /* 增强移动设备上的滚动体验 */
  }
}

/* 美化输入框 */
input, textarea, select {
  border-radius: 6px !important;
  border: 1px solid var(--block-border-color) !important;
  padding: 5px 10px !important;
  transition: all 0.3s ease !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--active-button-color) !important;
  box-shadow: 0 0 0 3px rgba(207, 147, 230, 0.2) !important;
}

/* 美化颜色样本 */
.color_area {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 美化预览区域 */
#toggle_preview {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 工具提示美化 */
.ui_tooltip {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.3s ease-in-out;
}

/* 添加适应性样式 */
@media (max-width: 768px) {
  .sidebar_left.active, .sidebar_right.active {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  }
}