:root {
  --标题下间距: 5px;
  --列表左右内边距: 4px;
  --顶部控件偏移: 65px;
  --基础形状数量: 9;
}

.pcr-app {
  background: #222 !important;
  box-shadow: 0 0 0 1px #def5, 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03) !important;
}

.pcr-app[data-theme="monolith"] {
  width: 16em;
}

.pcr-interaction > input[type="text"].pcr-result,
.pcr-interaction input.pcr-type {
  background: #111;
  color: white;
  outline: solid 1px #fff4;
  font-family: "JetBrains Mono", Consolas, "Noto Sans SC", 微软雅黑, sans-serif;
}

.pcr-app .pcr-interaction > input[type="text"].pcr-result {
  width: 100%;
  flex: auto;
  color: white;
}

.pcr-app .pcr-interaction > input.pcr-type {
  width: calc(50% - 0.4em);
  color: silver;
}

.pcr-app .pcr-interaction > input.pcr-type.active {
  color: white;
  background-color: #3174e3;
}

.pickr button:focus {
  box-shadow: 0 0 0 1px rgb(255, 255, 255, 0.85), 0 0 0 1px var(--pcr-color);
}

.pickr .pcr-button::before {
  border-radius: 0.2em;
}

.pickr .pcr-button::after {
  left: 50%;
  translate: -50% 0;
  width: 103%;
}

.禁用 {
  filter: brightness(0.25);
  pointer-events: none;
}

#总区 {
  position: relative;
  width: clamp(800px, 100vw, 2400px);
  height: clamp(600px, calc(100vh - 5px), 3200px);
  margin: 0 auto;
  padding: 50px 0 0 0;
  font-family: "Google Sans Code", Consolas, "Noto Sans SC", 微软雅黑, sans-serif;
}

#设置区 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff08;
  pointer-events: none;
}

.设置分区 {
  display: flex;
  align-items: center;
  gap: var(--标题下间距);
  pointer-events: auto;
  height: fit-content;
  backdrop-filter: blur(10px);
  border-radius: 100px;
  overflow: hidden;
}

.标题 {
  color: #89a;
  padding-left: 2px;
  user-select: none;
}

.辅助区 {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.辅助列表.列表 {
  padding: 2px var(--列表左右内边距);
  display: flex;
  padding: 5px 15px;
}

.辅助视觉效果区 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.辅助复选区 {
  position: relative;
  padding: 1px;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: flex;
}

.辅助复选区:hover > .标签 {
  box-shadow: inset 0 0 0 1px #d7a;
  background-color: #d7a2;
}

.辅助视觉效果区 > .标签::before {
  background: center/70% no-repeat url("./Images/visual-effects-off.svg");
  filter: invert(1) brightness(1);
}

.辅助视觉效果区:has(.复选框:checked) .标签::before {
  background: center/70% no-repeat url("./Images/visual-effects-on.svg");
  filter: invert(0) brightness(2);
}

.按钮音效效果区 > .标签::before {
  background: center/60% no-repeat url("./Images/audio-off.svg");
  filter: invert(1);
}

.按钮音效效果区:has(.复选框:checked) .标签::before {
  background: center/60% no-repeat url("./Images/audio-on.svg");
}

.模式复选区 > .标签::before {
  background: center/75% no-repeat url("./Images/switch-off.svg");
  filter: invert(0);
}

.模式复选区:has(.复选框:checked) .标签::before {
  background: center/75% no-repeat url("./Images/switch-on.svg");
  filter: invert(0);
}

.标签 {
  text-wrap: nowrap;
  font-size: 14px;
  user-select: none;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  position: relative;
}

.辅助列表 .标签::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.复选框 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

#绘图区 {
  width: 100%;
  height: 100%;
  background-color: #00000025;
  position: relative;
}

#画布 {
  width: 100%;
  height: 100%;
}

.基础形状区 {
  width: calc(30px * var(--基础形状数量) + 15px * 2);
  height: fit-content;
  position: absolute;
  top: var(--顶部控件偏移);
  left: 50%;
  translate: -50% 0;
}

.列表,
.操作列表组 {
  background-color: #bdf1;
  /* background-color: #0005; */
  box-shadow: inset 0 0 1px 1px #fff1;
  /* box-shadow: inset 0 0 1px 1px #fff3; */
  flex-grow: 1;
  padding: 2px var(--列表左右内边距);
  border-radius: 10px;
}

.形状列表 {
  display: flex;
  padding: 5px 15px;
  border-radius: 100px;
}

.基础形状分区 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding: 1px;
  border-radius: 4px;
  position: relative;
}

.基础形状分区:has(.基础形状单选框:checked) .形状符号 {
  background-color: #5af8;
}

.基础形状分区:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.基础形状分区:hover .形状符号 {
  background-color: #5af3;
  box-shadow: inset 0 0 1px 1px #5af;
}

.基础形状分区:has(.基础形状单选框:checked) .示意符号 {
  filter: invert(1);
}

label {
  user-select: none;
}

.形状符号 {
  width: 100%;
  height: 100%;
  padding: 4px;
  font-size: 16px;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.示意符号 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(0.8);
}

.基础形状单选框 {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.单选框:hover,
.复选框:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.清空画布区 {
  position: absolute;
  top: var(--顶部控件偏移);
  left: 50%;
  translate: calc((var(--基础形状数量) / 2 + 9) * 30px) 0;
  border-radius: 4px;
}

#清空画布按钮 {
  flex-grow: 1;
  width: fit-content;
  height: 40px;
  color: #fff;
}

#清空画布按钮 > img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

#清空画布按钮:hover {
  box-shadow: inset 0 0 1px 1px #fffa;
  background-color: #822222;
}

#清空画布按钮:active {
  box-shadow: inset 0 0 1px 1px #fff;
  background-color: #b22222;
}

.操作列表组 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.常用操作列表,
.形状交互列表,
.形状操纵列表 {
  background-color: transparent;
  box-shadow: none;
  flex-grow: 0;
  padding: 0;
  display: flex;
  width: 60px;
  flex-wrap: wrap;
}

.常用操作列表 > .按钮,
.形状交互列表 > .按钮 {
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-radius: 4px;
}

.常用操作列表 > .按钮 > img,
.形状交互列表 > .按钮 > img {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

.常用操作区 {
  position: absolute;
  top: 50%;
  left: 20px;
  translate: 0 -50%;
  border-radius: 10px;

  .操作列表组 {
    padding: 8px 5px;
  }
}

.按钮容器 {
  position: relative;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px;
  border-radius: 4px;
}

.按钮 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  user-select: none;
  border-radius: 4px;
  padding: 4px;
}

.按钮:hover {
  box-shadow: inset 0 0 1px 1px #5afc;
  background-color: #5af3;
}

.按钮:active {
  box-shadow: inset 0 0 1px 1px #5af;
  background-color: #5af7;
}

.颜色区 {
  position: absolute;
  top: var(--顶部控件偏移);
  left: 50%;
  translate: calc((var(--基础形状数量) / 2 + 1.5) * 30px) 0;

  .颜色列表 {
    display: flex;
    padding: calc(5px + (30px - 26.67px) / 2) 15px;
    border-radius: 100px;

    .颜色分区 {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 50%;
      padding: 0 10px;

      .复选框 {
        position: static;
        opacity: 1;
        width: 100px;
      }
    }
  }
}

.滑块组 {
  position: absolute;
  top: 60px;
  left: 50%;
  translate: -450px 0;
}

.滑块组 > .设置分区 {
  justify-content: flex-end;
  height: 25px;
  gap: 10px;
  padding: 0 10px;

  .标题 {
    text-align: right;
  }

  .滑块容器 {
    display: flex;
    align-items: center;

    input[type="range"] {
      accent-color: lightsteelblue;
      height: 6px;
    }

    input[type="range"]::-webkit-slider-thumb {
      scale: 1.25;
    }

    .标签 {
      width: calc(2ch + 10px);
      padding-left: 10px;
      color: lightsteelblue;
    }
  }
}

#文本输入容器 {
  position: absolute;
}

#文本输入 {
  font-family: "JetBrains Mono", Consolas, "Noto Sans SC", 微软雅黑, sans-serif;
  color: white;
  padding: 8px;
  min-width: 150px;
  border-radius: 5px;
  background: #222;
  border: solid 2px #678;
  outline: none;
  line-height: normal;
  box-shadow: 0 3px 3px 0 #0005;
}

.文本操作提示 {
  position: absolute;
  top: -25px;
  left: 3px;
  font-size: 14px;
  color: silver;
}

.文本提示按键 {
  color: lightskyblue;
}

.按钮容器:has(#编组:checked) {
  background-color: #5af8;
}