/* =========== 进化90.css =========== */

/* ======== 动感时钟：脉冲 + 轻旋 + 霓虹光 ======== */
@keyframes dynamicClock{
  0%   { transform:scale(1)   rotate(0deg);   filter:drop-shadow(0 0 0px #ff4d4d); }
  30%  { transform:scale(1.15)rotate(5deg);   filter:drop-shadow(0 0 4px #ff4d4d); }
  50%  { transform:scale(1.05)rotate(-4deg);  filter:drop-shadow(0 0 6px #00d6ff); }
  70%  { transform:scale(1.12)rotate(4deg);   filter:drop-shadow(0 0 4px #ffd500); }
  100% { transform:scale(1)   rotate(0deg);   filter:drop-shadow(0 0 0px #ff4d4d); }
}

.动感时钟{
  display:inline-block;          /* 让 transform 生效 */
  font-weight:bold;
  animation:dynamicClock 2.4s ease-in-out infinite;
  transition:filter .2s;
}
.动感时钟:hover{
  filter:drop-shadow(0 0 8px #fff);   /* 悬停时额外高亮，可删 */
}

/* 呼吸动画：轻微放大 + 颜色渐变 */
@keyframes pulseClock{
  0%   { transform:scale(1);   color:#222; }
  50%  { transform:scale(1.10);color:#ff4d4d; }
  100% { transform:scale(1);   color:#222; }
}

.呼吸动画{
  display:inline-block;                /* 让 transform 生效 */
  font-weight:bold;
  animation:pulseClock 1.5s ease-in-out infinite;
  transition:filter .3s;
}
.呼吸动画:hover{ filter:brightness(1.2); } /* 悬停高亮（可删） */

/* 辅助：让每个冒号成为独立行内块 */
.冒号闪烁{letter-spacing:.04em;}
.冒号闪烁::after{content:'';}       /* 防止最后一个冒号失去动画 */

.冒号闪烁{
  position:relative;
}
.冒号闪烁::before{
  content:attr(data-time);             /* JS 会写入 data-time */
}

/* 冒号闪烁：50% 时间可见 50% 隐藏 */
@keyframes blinkColon{0%,49%{opacity:1;}50%,100%{opacity:0;}}
.冒号闪烁 span.colon{
  animation:blinkColon 1s step-end infinite;
}

/* 给 js 一行辅助：把冒号包成 <span class="colon">: </span> */

/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #000;
  /* 黑色字 */
}

/* 第一行：顶部 */
.top-row {
  display: flex;
  width: 100%;
  height: 50px;
  /* background-color: #f7f7f7; */
  align-items: center;
  border-bottom: 2px solid #ccc;
}

  /* === 顶端左上角 === */

.top-left{
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* === 移除原有视觉样式 === */
  background: none;   
  border: none;
  cursor: pointer;         /* 鼠标悬停时显示手型光标，表示可点击 */
}


.top-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}

/* 第二行：main区域 */
.main {
  display: flex;
  width: 100%;
  height: calc(100vh - 50px);
}


/* 拖拽句柄 */
#sidebarHandle {
  width: 5px;
  background-color: #ccc;
  cursor: col-resize;
}

/* 工作区 */
#workspace {
  flex: 1;
  background-color: #fff;
  overflow: auto;
  padding: 10px;
}

/* ====== 顶部的无边框控件 ====== */
.controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* *********************************** */
/* 无框 + 无背景 + 纯文本视觉的 dom-button */
.dom-button {
  display: inline-block;
  padding: 0;
  /* 去掉或减小内边距 */
  border: none;
  /* 无边框 */
  background-color: transparent;
  /* 透明背景 => 完全无框 */
  color: #000;
  /* 保持文字颜色 */
  cursor: pointer;
  /* 鼠标变手型，表示可点击 */
  user-select: none;
  /* 禁止选中文本(可选) */
  /* 若你连过渡也不需要，可以去掉这两行 */
  transition: background-color 0.2s ease;
  will-change: background-color;
}

/* 悬停、按下都保持无背景 */
.dom-button:hover,
.dom-button:active {
  background-color: transparent;
  /* 不再改变背景 */
}

/* ********************************************* */
/* 通用下拉: dom-select */
.dom-select {
  position: relative;
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  user-select: none;
  padding-right: 20px;
}

.dom-select::after {
  content: "▼";
  font-size: 10px;
  color: #666;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* 通用输入框: 输入框 (contenteditable模拟) */
.输入框 {
  border: none;
  outline: none;
  display: inline-block;
  min-width: 100px;
  padding: 4px 8px;
  /* border-bottom: 1px dashed #999; */
  background-color: #fff;
  color: #000;
  cursor: text;
  user-select: text;
}

.输入框:focus {
  outline: none;
  /* border-bottom: 1px solid #007bff; */
}

#timeDisplay {
  font-size: 12px;
  margin-left: 10px;
  color: #333;
}

/* 边栏 *********/
#sidebar {
  width: 220px;
  min-width: 80px;
  background-color: #fff;
  border-right: 1px solid #ccc;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.1s;
  display: none;
  /* 默认关闭none，切换打开block */
}

/* 边栏.css */
.主页按钮 {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  user-select: none;
}

.主页按钮:hover {
  background-color: #f0f0f0;
}

.submenu {
  display: none;
  padding: 0 0 0 20px;
  background: #fafafa;
}

/* 控件设置.css */
/* 小红点默认样式 */
.dot {
  color: blue;
  /* 初始为蓝色 */
  /* transition: color 0.3s; */
  /* 颜色切换的过渡动画 */
  margin-left: 5px;
  /* 小距离分隔 */
  cursor: pointer;
  /* 鼠标悬浮为手型 */
}

/* 点击后添加 .red 时，显示红色 */
.dot.red {
  color: red;
}


/* ================ 下面是你新增的“按格拖拽”功能 ================= */



/* ====================== 
   全局 / 通用样式 
   ====================== */
/* body.拖拽合并_module {
    background: #f0f0f0;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  } */

/* 原有的“拖拽合并的格子”样式 */
.拖拽合并_grid-item {
  border: 1px solid rgb(138, 198, 16) !important;
  /* 默认的边框颜色 */
  box-sizing: border-box;
  display: flex;
  /* display: grid;
    width: 100%;
    height: 100%; */
  align-items: center;
  justify-content: center;
  user-select: none;
  /* 禁止选中文字 */
  transition: background 0.1s;
}

/* .拖拽合并_grid-item::after {
    content: "abcd";
  } */

/* 鼠标悬浮时的示例效果 */
.grid-item:hover {
  background: #e0f7fa;
}

/* 拖拽选中时的临时高亮 */
.当前选中的格子 {
  background: #c5cae9;
}


/* ====================== 
     新增：子网格容器（2×2） 
     ====================== */
.子网格容器 {
  /* 让它变成一个 2 列 x 2 行 的子网格 */
  display: grid;

  /* 如果你要让它自动填满父元素(overlay)，就用 100% */
  width: 100%;
  height: 100%;
  background-color: #fff;
  /* 灰底，新增调试 */
  border: none;
  /* 无边框 新增调试*/
  /* 可选：如果想要格子之间留一点空隙，可加 gap */
  /* gap: 5px; */
}

/* 
   * 让子网格里的每个 .拖拽合并_grid-item 都使用另一种边框颜色， 
   * 这样可以跟父容器区分开来，也能保证四个格子都有完整的线 
   */
.子网格容器>.Grid格子 {
  border: 1px solid #999;
  /* 覆盖或替换默认的 border */
  box-sizing: border-box;
}

/* 与布局辅助.js106行同步修改 */
.自定义_merge-overlay {
  background: rgba(255, 0, 0, 0.2);
  border: 1px dashed blue;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  pointer-events: auto;
  cursor: pointer;
}

.按钮_无边框 {
  /* 去掉原生边框、外边框 */
  border: none;
  outline: none;

  /* 背景设为透明，使之看不出边框区分 */
  background-color: transparent;

  /* 设置文字样式 */
  color: #333;
  /* 字体颜色 */
  font-size: 16px;
  /* 字号可自行调整 */
  cursor: pointer;
  /* 鼠标移上去仍是“手形” */

  /* 内边距：可选，根据需要自由调整 */
  padding: 6px 12px;

  /* 可选：去除默认的按钮字体加粗/位置等 */
  font-family: inherit;
  font-weight: normal;

  /* 可选：如果想让它在点击时有个按下感，可以加 transition */
  transition: background-color 0.2s ease;
}

/* 悬停/焦点/点击时可给些交互反馈 */
.按钮_无边框:hover {
  background-color: rgba(0, 0, 0, 0.05);
  /* 浅浅的背景，表示可点击 */
}

.按钮_无边框:active {
  background-color: rgba(0, 0, 0, 0.1);
  /* 点击下去更明显 */
}

.按钮_无边框:focus {
  outline: 2px solid #aaa;
  /* 或者依然不显示 focus outline，看需求 */
  outline-offset: 2px;
}


#显示ID标签 {
  position: absolute;
  display: none;
  /* 初始隐藏 */
  /* background:  '#ffffff80'; */
  color: hsla(258, 86.10%, 39.60%, 0.88);
  padding: 2px 6px;
  font-size: 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;

}

/* 加载HTML文件_文件名浮窗, 做绝对定位 */
.相对页面_浮窗 {
  position: absolute;
  display: none;
  padding: 10px;
  min-width: 150px;
  background-color: #fff;
  border: 2px solid #363dc2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  box-sizing: border-box;
  /* 关键属性，用来开启纵向滚动条 */
  overflow-y: auto;
  /* 设定最大可见高度，超出部分出现滚动条 */
  max-height: 400px;
}

/* 浮窗参考元素 */
.浮窗参考元素 {
  /* position: relative; */
  cursor: pointer;
}

/* 浮窗里每行项目的样式（可自定义） */
.浮窗行项目样式 {
  padding: 5px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.浮窗行项目样式:last-child {
  border-bottom: none;
}

.浮窗行项目样式:hover {
  background-color: #f0f0f0;
}


/* 临时修补：所有 dropdown-menu 都定位自身 */
dropdown-menu { position: relative; }
color-display-menu { position: relative; }

/* 所有 color-display 组件都用自己当定位上下文 */
color-display { position: relative; }




.设计画布 {
    padding: 30px;
    background: #ffffff;
    overflow-y: auto;
    position: relative;
}                
.拖放区域 {
    min-height: 500px;
    border: 3px dashed #dee2e6;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
}

.拖放区域.dragover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.拖放区域.empty::before {
    content: '🎨 拖拽组件到这里开始设计模块\A💡 或者双击组件快速添加\A🖱️ 点击下方的快速模板开始';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #6c757d;
    font-size: 1.2em;
    text-align: center;
    white-space: pre-line;
    pointer-events: none;
}