:root {
  --进度条颜色-已填充: rgb(41, 126, 78);
  --进度条颜色-未填充: rgba(224, 224, 224, 0.85);
  --拇指宽度: 16px;

  /* 浮点数相关变量 */
  --位格子背景: #2d2d2d;
  --位格子边框: #444;
  --位格子悬停: #3a3a3a;
  --位格子激活: #2e7d32;
  --位格子激活悬停: #1b5e20;
  --符号位背景: #aa4444;
  --符号位边框: #cc3333;
  --符号位悬停: #dd4444;
  --符号位激活: #1976d2;
  --符号位激活悬停: #1565c0;
  --指数位背景: #995500;
  --指数位边框: #773300;
  --指数位悬停: #bb6600;
  --指数位激活: #ff5722;
  --指数位激活悬停: #e64a19;
  --尾数位背景: #2d662d;
  --尾数位边框: #1a4d1a;
  --尾数位悬停: #3d773d;
  --尾数位激活: #2e7d32;
  --尾数位激活悬停: #1b5e20;
  --字节分隔线: #666;
  --索引文字: #aaa;

  --数字颜色: #4caf50;
  --次方符号颜色: #ff9800;
  --运算符颜色: #aaa;
  --等号颜色: gold;
  --括号颜色: #ff9800;
  --上标颜色: #e91e63;
  --结果颜色: #eaeaea;
  --深色文本: #c0c0c0;
  --深色次要文本: #aaa;
  --深色悬停背景: #3a3a3a;
  --选中选项颜色: #4caf50;
  --未选中选项颜色: #888;
  --选项悬停颜色: #2196f3;
}

/* 主容器布局 */
.浮点数总区 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  width: 100%;
  margin: 0 auto;
  padding: 150px 20px 0;
}

/* 展示区样式 */
.展示区 {
  width: 100%;
  min-height: 400px;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Canvas容器 */
.canvas-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;
}

#floatCanvas {
  display: block;
  background: transparent;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  border-radius: 8px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 位格子样式 */
.位格子 {
  width: 40px;
  height: 40px;
  border: 2px solid var(--位格子边框);
  background: var(--位格子背景);
  border-radius: 8px;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 16px;
  font-weight: bold;
  color: var(--深色文本);
  user-select: none;
  overflow: hidden;
}

.位格子::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: var(--位格子背景);
  border-radius: 6px;
  transition: all 0.3s ease;
  z-index: 1;
}

.位格子::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 12px;
  background: #666;
  border-radius: 6px;
  transition: all 0.3s ease;
  z-index: 2;
}

.位格子:hover {
  border-color: var(--选项悬停颜色);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.位格子:hover::before {
  background: var(--位格子悬停);
}

.位格子.激活 {
  border-color: var(--位格子激活);
}

.位格子.激活::before {
  background: var(--位格子激活);
}

.位格子.激活::after {
  background: #333;
  top: calc(100% - 16px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.位格子.激活:hover::before {
  background: var(--位格子激活悬停);
}

/* 符号位样式 */
.位格子.符号位 {
  border-color: var(--符号位边框);
}

.位格子.符号位::before {
  background: var(--符号位背景);
}

.位格子.符号位:hover::before {
  background: var(--符号位悬停);
}

.位格子.符号位.激活 {
  border-color: var(--符号位激活);
}

.位格子.符号位.激活::before {
  background: var(--符号位激活);
}

.位格子.符号位.激活:hover::before {
  background: var(--符号位激活悬停);
}

/* 指数位样式 */
.位格子.指数位 {
  border-color: var(--指数位边框);
}

.位格子.指数位::before {
  background: var(--指数位背景);
}

.位格子.指数位:hover::before {
  background: var(--指数位悬停);
}

.位格子.指数位.激活 {
  border-color: var(--指数位激活);
}

.位格子.指数位.激活::before {
  background: var(--指数位激活);
}

.位格子.指数位.激活:hover::before {
  background: var(--指数位激活悬停);
}

/* 尾数位样式 */
.位格子.尾数位 {
  border-color: var(--尾数位边框);
}

.位格子.尾数位::before {
  background: var(--尾数位背景);
}

.位格子.尾数位:hover::before {
  background: var(--尾数位悬停);
}

.位格子.尾数位.激活 {
  border-color: var(--尾数位激活);
}

.位格子.尾数位.激活::before {
  background: var(--尾数位激活);
}

.位格子.尾数位.激活:hover::before {
  background: var(--尾数位激活悬停);
}

/* 控制区样式 */
.控制区 {
  background: var(--位格子背景);
  border-radius: 12px;
  border: 2px solid var(--位格子边框);
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 科学记数法显示区样式 */
.科学记数法显示区 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  background: rgba(45, 45, 45, 0.3);
  border-radius: 8px;
  border: 1px solid var(--位格子边框);
}

.科学记数法标签 {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 14px;
  color: var(--深色文本);
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  margin-bottom: 5px;
}

.数值表示内容 {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.表示项 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.表示标签 {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 14px;
  color: #888;
  font-weight: 500;
  width: fit-content;
}

.表示值 {
  font-family: "Googole Sans Code", Consolas, monospace;
  font-size: 18px;
  font-weight: normal;
  word-break: break-all;
  line-height: 1.4;
}

.表示值,
.整数部分 {
  color: rgb(106, 162, 189);
}

/* 整数部分的特殊样式 */
.整数部分 {
  min-width: 1ch; /* 确保至少有1个字符的宽度 */
  text-align: right; /* 右对齐，确保小数点对齐 */
}

.表示值 sup {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  color: darkgoldenrod;
}

.小数点 {
  color: #fff5;
  font-weight: bold;
}

.小数部分 {
  color: rgb(75, 132, 196);
}

.乘号 {
  color: lightslategray;
  font-weight: bold;
}

/* 二进制科学记数法的整数部分特殊样式 - 左对齐 */
#binaryScientificValue .整数部分 {
  display: inline;
  text-align: left;
  width: auto;
}

/* 浮点数类型选择区域 */
.浮点数类型选择区 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.浮点数类型选项 {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--位格子背景);
  border: 2px solid var(--位格子边框);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.浮点数类型选项:hover {
  border-color: var(--选项悬停颜色);
  background: var(--深色悬停背景);
}

.浮点数类型选项.selected {
  border-color: var(--选中选项颜色);
  background: rgba(76, 175, 80, 0.2);
  color: var(--选中选项颜色);
}

.浮点数类型选项 input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.浮点数类型标签 {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 500;
  font-size: 14px;
  color: var(--深色文本);
  display: flex;
  align-items: center;
  gap: 10px;
}

.浮点数类型选项.selected .浮点数类型标签 {
  color: var(--深色文本);
}

.浮点数类型标签 .变量类型 {
  color: var(--深色文本);
  font-weight: bold;
}

.浮点数类型选项.selected .浮点数类型标签 .变量类型 {
  color: lightblue;
}

.浮点数类型标签 .字节数 {
  display: flex;
  align-items: center;
  gap: 2px;
}

.浮点数类型标签 .字节数 .数字 {
  color: var(--次方符号颜色);
  font-family: "Google Sans Code", Consolas, monospace;
  font-weight: bold;
}

.浮点数类型标签 .字节数 .单位 {
  color: var(--深色次要文本);
  font-size: 12px;
}

/* 数值显示区域 */
.数值显示区 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.数值标签 {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 14px;
  color: var(--深色文本);
  font-weight: 500;
}

/* 数值输入组样式 */
.数值输入组 {
  display: flex;
  align-items: center;
  background: var(--位格子背景);
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.数值输入组:hover {
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.数值显示区域 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.科学记数法 {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 16px;
  color: var(--深色次要文本);
  font-weight: normal;
  text-align: center;
  min-width: 120px;
}

.数值输入框 {
  font-family: "Google Sans Code", Consolas, monospace;
  font-size: 18px;
  color: var(--数字颜色);
  padding: 10px 20px;
  background: transparent;
  border: none;
  outline: none;
  min-width: 120px;
  text-align: center;
  -moz-appearance: textfield;
}

.数值输入框::-webkit-outer-spin-button,
.数值输入框::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 数值增减按钮 */
.数值增减按钮 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--位格子背景);
  border: 2px solid var(--位格子边框);
  border-radius: 4px;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  transition: all 0.2s ease;
  position: relative;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 20px;
  font-weight: bold;
  color: var(--深色文本);
  user-select: none;
}

.数值增减按钮:hover {
  border-color: var(--选项悬停颜色);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.数值增减按钮.增加按钮::before {
  content: "+";
}

.数值增减按钮.减少按钮::before {
  content: "−";
}

/* 极值按钮组 */
.极值按钮组 {
  display: flex;
  gap: 10px;
  margin-left: 25px;
}

.极值按钮 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 36px;
  background: var(--位格子背景);
  border: 2px solid var(--位格子边框);
  border-radius: 6px;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  transition: all 0.2s ease;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 14px;
  font-weight: bold;
  color: var(--深色文本);
  user-select: none;
}

.极值按钮:hover {
  border-color: var(--选项悬停颜色);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.极值按钮.最大值按钮 {
  color: #4caf50;
  border-color: #4caf5030;
}

.极值按钮.最小值按钮 {
  color: #f44336;
  border-color: #f4433630;
}

/* 极值按钮选中状态 */
.极值按钮.selected {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4caf50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.极值按钮.最小值按钮.selected {
  background: rgba(244, 67, 54, 0.2);
  border-color: #f44336;
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
}

/* 步进设置区域 */
.步进设置区 {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--位格子背景);
  border: 2px solid var(--位格子边框);
  border-radius: 8px;
  padding: 5px 10px;
  margin-left: 25px;
  transition: all 0.3s ease;
}

.步进设置区:hover {
  border-color: var(--选项悬停颜色);
  background: var(--深色悬停背景);
}

.步进标签 {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 14px;
  color: var(--深色文本);
  font-weight: 500;
  white-space: nowrap;
}

.步进输入框 {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 14px;
  color: var(--数字颜色);
  font-weight: bold;
  padding: 4px 5px;
  background: transparent;
  border: none;
  outline: none;
  width: 12ch;
  transition: all 0.3s ease;
  -moz-appearance: textfield;
}

.步进输入框::-webkit-outer-spin-button,
.步进输入框::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.步进输入框:hover {
  background: rgba(33, 150, 243, 0.1);
}

.步进输入框:focus {
  background: rgba(76, 175, 80, 0.1);
}