/* ===== 全局重置 ===== */
html, body {
  background: #f0f2f5;
  overflow: hidden;
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  margin: 0;
}
#wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#body_all {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ===== 顶部导航栏（深色 #1A1D23） ===== */
.app-topbar {
  background: #1A1D23;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 1030;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.topbar-brand {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-right: 28px;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-brand i {
  font-size: 20px;
  margin-right: 8px;
  color: #4C9AFF;
}
.topbar-menu {
  display: flex;
  align-items: center;
  gap: 2px;
}
.topbar-menu > li {
  list-style: none;
  position: relative;
}
.topbar-menu > li > a,
.topbar-menu .dropdown > a {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.75);
  padding: 0 14px;
  height: 48px;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.topbar-menu > li > a:hover,
.topbar-menu .dropdown > a:hover,
.topbar-menu .dropdown.open > a {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.topbar-menu > li > a i {
  margin-right: 6px;
  font-size: 14px;
}
.topbar-menu .caret {
  margin-left: 6px;
  border-top-color: rgba(255,255,255,0.6);
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar-right .topbar-text-btn {
  color: rgba(255,255,255,0.75);
  padding: 0 12px;
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 13px;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.15s;
  cursor: pointer;
}
.topbar-right .topbar-text-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.topbar-right .topbar-text-btn i {
  margin-right: 6px;
}
/* 用户头像缩写 */
.topbar-user {
  display: flex;
  align-items: center;
  margin-left: 8px;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  transition: background 0.15s;
}
.topbar-user:hover {
  background: rgba(255,255,255,0.1);
}
.topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 8px;
  overflow: hidden;
}
.topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.topbar-user-name {
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-user .caret {
  margin-left: 6px;
  border-top-color: rgba(255,255,255,0.6);
}
.topbar-login-btn {
  color: #4C9AFF;
  padding: 0 14px;
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid #4C9AFF;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.15s;
}
.topbar-login-btn:hover {
  background: #4C9AFF;
  color: #fff;
}
/* 顶栏下拉菜单深色适配 */
.app-topbar .dropdown-menu {
  background: #262931;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  margin-top: 0;
  border-radius: 6px;
  padding: 4px 0;
}
.app-topbar .dropdown-menu > li > a {
  color: rgba(255,255,255,0.75);
  padding: 8px 20px;
  font-size: 13px;
}
.app-topbar .dropdown-menu > li > a:hover {
  background: rgba(76,154,255,0.2);
  color: #fff;
}
.app-topbar .dropdown-menu .dropdown-header {
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 20px 4px;
}
.app-topbar .dropdown-menu .divider {
  background: rgba(255,255,255,0.08);
  margin: 4px 0;
}

/* ===== 工具栏（白色卡片+阴影） ===== */
.app-toolbar {
  background: #fff;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  z-index: 100;
  gap: 12px;
}
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.toolbar-divider {
  width: 1px;
  height: 24px;
  background: #e8e8e8;
  margin: 0 4px;
}
/* 工具栏按钮统一样式 */
.app-toolbar .btn {
  border-radius: 4px !important;
  font-size: 13px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: none;
  transition: all 0.15s;
  font-weight: 500;
}
.app-toolbar .btn i {
  margin-right: 6px;
}
/* 添加按键 - 主操作色 */
.app-toolbar .btn-addkey {
  background: #1890ff;
  color: #fff;
}
.app-toolbar .btn-addkey:hover {
  background: #40a9ff;
  color: #fff;
}
.app-toolbar .btn-addkey.dropdown-toggle {
  padding: 0 8px;
  background: #1890ff;
  border-left: 1px solid rgba(255,255,255,0.2);
}
/* 删除按键 - 红色警示 */
.app-toolbar .btn-delkey {
  background: #fff;
  color: #ff4d4f;
  border: 1px solid #ffccc7 !important;
}
.app-toolbar .btn-delkey:hover {
  background: #fff1f0;
  color: #ff4d4f;
  border-color: #ff4d4f !important;
}
.app-toolbar .btn-delkey.disabled {
  color: #bfbfbf;
  border-color: #f0f0f0 !important;
  background: #fafafa;
}
/* 图标按钮组（撤销重做剪切复制粘贴） */
.app-toolbar .btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  background: #fff;
  color: #595959;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
  position: relative;
}
.app-toolbar .btn-icon i {
  margin-right: 0;
  font-size: 14px;
}
.app-toolbar .btn-icon:hover {
  color: #1890ff;
  border-color: #1890ff !important;
}
.app-toolbar .btn-icon.disabled,
.app-toolbar .btn-icon[disabled] {
  color: #d9d9d9;
  border-color: #f0f0f0 !important;
  background: #fafafa;
  cursor: not-allowed;
}
/* 下载按钮 - 绿色 */
.app-toolbar .btn-download {
  background: #52c41a;
  color: #fff;
}
.app-toolbar .btn-download:hover {
  background: #73d13d;
  color: #fff;
}
.app-toolbar .btn-download.dropdown-toggle {
  padding: 0 8px;
}
/* 保存按钮 - 蓝色主操作 */
.app-toolbar .btn-save {
  background: #1890ff;
  color: #fff;
}
.app-toolbar .btn-save:hover {
  background: #40a9ff;
  color: #fff;
}
.app-toolbar .btn-save.disabled {
  background: #bfbfbf;
  color: #fff;
}
/* 工具栏下拉菜单 */
.app-toolbar .dropdown-menu {
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border: 1px solid #e8e8e8;
  padding: 4px 0;
  margin-top: 4px;
}
.app-toolbar .dropdown-menu > li > a {
  padding: 8px 16px;
  font-size: 13px;
  color: #333;
}
.app-toolbar .dropdown-menu > li > a:hover {
  background: #e6f7ff;
  color: #1890ff;
}
.app-toolbar .dropdown-menu .divider {
  margin: 4px 0;
}
/* 收藏按钮 */
.app-toolbar .btn-star {
  background: #fff;
  color: #faad14;
  border: 1px solid #ffe58f !important;
}
.app-toolbar .btn-star:hover {
  background: #fffbe6;
}

/* ===== 主内容区（flex布局） ===== */
.app-main {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 12px;
  gap: 12px;
  overflow: hidden;
}
/* 画布区域 */
.app-canvas-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.canvas-card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.canvas-card-header {
  flex-shrink: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.canvas-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 键位徽标 */
.key-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
}
/* 核心功能：键位徽标内图标与文字基线对齐 */
.key-badge svg { display: block; }
/* 缩放控制组 */
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
}
.zoom-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #fff;
  color: #595959;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}
.zoom-btn:hover {
  background: #f0f0f0;
  color: #1890ff;
}
.zoom-level {
  min-width: 48px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #333;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  cursor: pointer;
  user-select: none;
}
.zoom-fit {
  width: auto;
  padding: 0 10px;
  font-size: 12px;
}
.canvas-card-body {
  flex: 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  position: relative;
}
/* 键盘缩放容器（使用CSS zoom而非transform，保证点击坐标正确） */
#keyboard-zoom-wrapper {
  transform-origin: center center;
  transition: zoom 0.2s ease;
  position: relative;
}
/* 覆盖旧的键盘样式 */
.canvas-card-body #keyboard {
  margin: 0;
  border: none;
  padding: 0;
  background: transparent;
}

/* Alerts区域 */
.app-alerts {
  flex-shrink: 0;
}
.app-alerts .alert {
  margin-bottom: 0;
  border-radius: 6px;
  font-size: 13px;
}

/* ===== 右侧属性面板（440px固定宽度） ===== */
.app-right-panel {
  width: 440px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  overflow: hidden;
}
/* 图标Tab侧栏 */
.panel-tabs {
  width: 48px;
  flex-shrink: 0;
  background: #fafafa;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  gap: 2px;
}
.panel-tab-btn {
  width: 40px;
  height: 48px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #8c8c8c;
  transition: all 0.15s;
  gap: 2px;
}
.panel-tab-btn i {
  font-size: 16px;
}
.panel-tab-btn span {
  font-size: 10px;
  line-height: 1;
}
.panel-tab-btn:hover {
  color: #1890ff;
  background: #e6f7ff;
}
.panel-tab-btn.active {
  color: #1890ff;
  background: #e6f7ff;
  font-weight: 600;
}
/* 面板内容区 */
.panel-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.panel-tab-pane {
  display: none;
  padding: 10px 8px;
  box-sizing: border-box;
}
.panel-tab-pane.active {
  display: block;
}
.panel-tab-pane .form-horizontal .control-label {
  font-size: 12px;
  color: #595959;
}
.panel-tab-pane .form-control {
  font-size: 12px;
}
/* 编辑器（ace）填充 */
.panel-tab-pane #rawdata,
.panel-tab-pane #customstyles,
.panel-tab-pane #noteseditor {
  border-radius: 4px;
}
.panel-tab-pane #rawdata,
.panel-tab-pane #customstyles {
  height: calc(100vh - 280px);
  min-height: 300px;
}
.panel-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #262626;
  padding: 12px 16px 8px;
  margin: 0;
  border-top: 1px solid #f0f0f0;
}
.panel-section-title:first-child {
  border-top: none;
  padding-top: 12px;
}

/* ===== 底部状态栏 ===== */
.app-statusbar {
  height: 28px;
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 12px;
  color: #8c8c8c;
}
.statusbar-left, .statusbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.statusbar-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.statusbar-item i {
  font-size: 12px;
}
/* 自动保存徽标 */
.autosave-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.autosave-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #52c41a;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== 底部Footer隐藏（整合到状态栏或不显示） ===== */
#footer {
  display: none;
}

/* ===== 覆盖旧的body margin ===== */
.body {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* 旧工具栏按钮组在新版中被重新组织，隐藏旧的直接子级btn-group */
.body > .btn-group {
  display: none !important;
}
/* 旧tab导航隐藏 */
.body > .nav-tabs {
  display: none !important;
}
/* 旧tab-content 重新调整 */
.body > #tab-content {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* 选中矩形框适配 */
#selectionRectangle {
  z-index: 10;
  pointer-events: none;
}
#rotationCrosshairs {
  z-index: 10;
  pointer-events: none;
}
/* 缩放包装器不拦截点击 */
#keyboard-zoom-wrapper {
  position: relative;
}
/* canvas-card-body需要relative让选中框正确定位 */
.canvas-card-body {
  position: relative;
}
/* ===== Ant Design风格属性面板（保留原有directive结构，仅CSS重塑） ===== */
/* 面板基础 */
.panel-content { padding:0; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; }
.panel-tab-pane { display:none; padding:0; box-sizing:border-box; }
.panel-tab-pane.active { display:block; }

/* 让旧form-horizontal全宽 */
.panel-tab-pane .form-horizontal {
  margin:0; padding:0; overflow-x:visible;
}

/* ----- 分区标题（通过在HTML中添加.section-title实现） ----- */
.section-title {
  font-size:13px; font-weight:600; color:#262626;
  padding:12px 16px 8px; margin:0;
  border-top:1px solid #f0f0f0;
}
.section-title:first-child { border-top:none; padding-top:12px; }

/* ----- form-group统一为flex布局 ----- */
.panel-tab-pane .form-horizontal .form-group {
  margin:0 16px 8px; display:flex; flex-direction:column; align-items:flex-start; flex-wrap:nowrap;
}
.panel-tab-pane .form-horizontal .form-group-sm { margin-bottom:8px; display:flex; flex-direction:column; align-items:flex-start; flex-wrap:nowrap; }
/* ----- 水平布局的form-group（用于安装位置等需要水平排列的区域） ----- */
.panel-tab-pane .form-horizontal .form-group.form-group-horizontal,
.panel-tab-pane .form-horizontal .form-group-sm.form-group-horizontal {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
}
/* 水平布局内的标签不需要底部padding */
.panel-tab-pane .form-horizontal .form-group.form-group-horizontal .control-label,
.panel-tab-pane .form-horizontal .form-group-sm.form-group-horizontal .control-label {
  padding: 0 !important;
  margin: 0;
  white-space: nowrap;
}

/* ----- 标签样式：AntD风格 ----- */
.panel-tab-pane .form-horizontal .control-label {
  float:none !important;
  width:auto !important; min-width:auto !important; max-width:none !important;
  padding:0 0 4px 0 !important;
  text-align:left !important;
  font-size:12px !important;
  color:#595959 !important;
  font-weight:normal !important;
  flex-shrink:0;
  line-height:1.5;
}

/* ----- 内容列占剩余宽度 ----- */
.panel-tab-pane .form-horizontal .col-md-3, .panel-tab-pane .form-horizontal .col-md-9,
.panel-tab-pane .form-horizontal .col-lg-3, .panel-tab-pane .form-horizontal .col-lg-9,
.panel-tab-pane .form-horizontal .col-md-2, .panel-tab-pane .form-horizontal .col-lg-1,
.panel-tab-pane .form-horizontal .col-md-10, .panel-tab-pane .form-horizontal .col-lg-11,
.panel-tab-pane .form-horizontal .col-sm-8, .panel-tab-pane .form-horizontal .col-md-5,
.panel-tab-pane .form-horizontal .col-lg-5, .panel-tab-pane .form-horizontal .col-sm-12,
.panel-tab-pane .form-horizontal .col-md-12, .panel-tab-pane .form-horizontal .col-lg-12,
.panel-tab-pane .form-horizontal .col-md-4, .panel-tab-pane .form-horizontal .col-lg-4,
.panel-tab-pane .form-horizontal .col-md-6, .panel-tab-pane .form-horizontal .col-lg-6 {
  float:none !important; width:auto !important; flex:1 1 auto !important;
  min-width:0 !important; padding:0 !important; margin:0 !important;
}

/* ----- AntD输入框：所有form-control统一AntD风格 ----- */
.panel-tab-pane .form-control,
.panel-tab-pane .form-control.input-sm {
  height:30px !important; padding:4px 10px !important;
  border:1px solid #d9d9d9 !important; border-radius:4px !important;
  font-size:12px !important; color:#262626 !important;
  background:#fff !important; box-shadow:none !important;
  transition:border-color .2s, box-shadow .2s !important;
  outline:none !important;
  -webkit-appearance:none;
  appearance:none;
}
.panel-tab-pane .form-control:hover { border-color:#40a9ff !important; }
.panel-tab-pane .form-control:focus {
  border-color:#1890ff !important;
  box-shadow:0 0 0 2px rgba(24,144,255,0.15) !important;
}
.panel-tab-pane .form-control:disabled { background:#f5f5f5 !important; color:#bfbfbf !important; cursor:not-allowed !important; }

/* ----- form-inline保持一行显示 ----- */
.panel-tab-pane .form-inline {
  display:flex !important; flex-wrap:nowrap; gap:6px !important;
  margin:0; align-items:center;
}
/* 标签编辑器行：3列网格 */
.panel-tab-pane .form-inline.has-grid {
  display:grid !important; grid-template-columns:1fr 1fr 1fr; gap:6px !important;
  align-items:stretch;
}
.panel-tab-pane .form-inline kbd-label-editor {
  display:block; max-width:100%;
}
.panel-tab-pane .form-inline kbd-label-editor .form-group {
  margin:0 !important; width:100%;
}
.panel-tab-pane .form-inline kbd-label-editor .input-group {
  display:flex !important; width:100%; border:1px solid #d9d9d9; border-radius:4px;
  background:#fff; overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.panel-tab-pane .form-inline kbd-label-editor .input-group:hover { border-color:#40a9ff; }
.panel-tab-pane .form-inline kbd-label-editor .input-group:focus-within {
  border-color:#1890ff; box-shadow:0 0 0 2px rgba(24,144,255,0.15);
}
.panel-tab-pane .form-inline kbd-label-editor .form-control:not([type="number"]) {
  flex:1; width:1% !important; min-width:40px !important; max-width:none !important;
  height:28px !important; padding:2px 4px !important;
  font-size:11px !important;
  border:none !important; border-radius:0 !important; text-align:center;
  box-shadow:none !important;
}
.panel-tab-pane .form-inline kbd-label-editor .input-group-btn {
  flex-shrink:0; min-width:22px;
}
.panel-tab-pane .form-inline kbd-label-editor .input-group-btn .btn {
  width:35px !important; height:28px !important; padding:0 !important; margin:0 !important;
  border:none !important; border-left:1px solid #d9d9d9 !important;
  border-radius:0 !important; background:#fafafa;
  flex-shrink:0; min-width:22px;
}
.panel-tab-pane .form-inline kbd-label-editor .form-control.input-sm[type="number"] {
  width: 30px !important; max-width:30px !important; min-width:30px !important;
  height:28px !important; padding:2px 0 !important;
  font-size:10px !important; text-align:center;
  border:none !important; border-left:1px solid #d9d9d9 !important;
  border-radius:0 !important; flex-shrink:0;
  -moz-appearance:textfield;
  appearance:textfield;
}
.panel-tab-pane .form-inline kbd-label-editor .form-control.input-sm[type="number"]::-webkit-inner-spin-button,
.panel-tab-pane .form-inline kbd-label-editor .form-control.input-sm[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance:none; margin:0;
}

/* ----- 数字输入框（宽/高/X/Y/旋转/字符大小等） ----- */
.panel-tab-pane .form-inline .kbd-multi-numbox,
.panel-tab-pane .form-inline .form-group.form-group-sm {
  display:inline-flex; align-items:center; margin:0;
}
.panel-tab-pane .form-inline .kbd-multi-numbox .form-control.input-sm {
  width: 30px !important; max-width:30px !important; height:28px !important; padding:2px 6px !important;
}
.panel-tab-pane .form-inline > div:not(.btn-group):not(.checkbox):not(.input-group):not(kbd-label-editor) {
  display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#8c8c8c;
}
.panel-tab-pane .form-inline .form-group.form-group-sm .form-control.input-sm {
  width: 120px !important; 
}

/* ----- 色板/文本大小等单行输入 ----- */
.panel-tab-pane .form-inline .color-name {
  font-size:11px; color:#8c8c8c;
}

/* ----- 颜色选择器（kbd-color-picker）AntD风格 ----- */
.panel-tab-pane kbd-color-picker .input-group {
  display:flex; width:100%; border:1px solid #d9d9d9; border-radius:4px; overflow:hidden;
  background:#fff; transition:border-color .2s;
}
.panel-tab-pane kbd-color-picker .input-group:hover { border-color:#40a9ff; }
.panel-tab-pane kbd-color-picker .input-group:focus-within {
  border-color:#1890ff; box-shadow:0 0 0 2px rgba(24,144,255,0.15);
}
.panel-tab-pane kbd-color-picker .form-control {
  flex:1; min-width:100px; border:none !important; border-radius:0 !important;
  height:28px !important; box-shadow:none !important;
  font-family:'Monaco','Consolas',monospace; font-size:11px !important;
}
.panel-tab-pane kbd-color-picker .input-group-btn .btn {
  width:32px !important; min-width:32px; height:28px !important;
  padding:0 !important; margin:0 !important;
  border:none !important; border-left:1px solid #d9d9d9 !important;
  border-radius:0 !important; flex-shrink:0;
}

/* ----- swap按钮（交换颜色/交换尺寸） ----- */
.panel-tab-pane #swap-colors,
.panel-tab-pane #swap-sizes {
  position:static !important;
  margin-left:4px;
  display:inline-block;
}
.panel-tab-pane #swap-colors .btn,
.panel-tab-pane #swap-sizes .btn {
  height:28px; padding:2px 12px; font-size:12px;
  border:1px solid #d9d9d9 !important; border-radius:4px !important;
  background:#fafafa; color:#595959;
}
.panel-tab-pane #swap-colors .btn:hover,
.panel-tab-pane #swap-sizes .btn:hover {
  border-color:#1890ff !important; color:#1890ff; background:#e6f7ff;
}

/* ----- 下拉选择/开关组（form-outdent） ----- */
.panel-tab-pane .form-outdent {
  margin-left:0 !important;
  display:flex; flex-wrap:wrap; gap:4px; align-items:center;
}
.panel-tab-pane .form-outdent .btn-group,
.panel-tab-pane .form-outdent .input-group {
  margin:0;
}
.panel-tab-pane .form-outdent .dropdown-fixedwidth {
  width:auto !important; min-width:80px; max-width:140px !important;
  height:28px !important; padding:2px 24px 2px 8px !important;
  font-size:11px !important;
  border:1px solid #d9d9d9 !important; border-radius:4px !important;
  background:#fff !important; color:#262626 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238c8c8c'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat !important; background-position:right 6px center !important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.panel-tab-pane .form-outdent .dropdown-fixedwidth:hover { border-color:#40a9ff !important; }
.panel-tab-pane .form-outdent .dropdown-fixedwidth.open { border-color:#1890ff !important; }
.panel-tab-pane .form-outdent .dropdown-fixedwidth .caret { display:none; }
.panel-tab-pane .form-outdent select.form-control {
  height:28px !important; padding:2px 24px 2px 8px !important; font-size:11px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238c8c8c'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat !important; background-position:right 6px center !important;
  appearance:none; -webkit-appearance:none;
}
.panel-tab-pane .form-outdent .checkbox {
  margin:0; padding-top:0;
}
.panel-tab-pane .form-outdent .checkbox label {
  font-size:12px; padding:4px 0;
}

/* ----- 其他复选框区域 ----- */
.panel-tab-pane .form-inline .checkbox {
  margin:0 8px 0 0; padding-top:0;
  display:inline-flex; align-items:center; white-space:nowrap;
}
.panel-tab-pane .form-inline .checkbox label {
  font-size:12px; padding:0; margin-bottom:0;
  display:inline-flex; align-items:center; white-space:nowrap;
}
.panel-tab-pane .form-inline .checkbox input[type="checkbox"] {
  margin-right:4px; margin-top:0;
}

/* ----- profile输入框 ----- */
.panel-tab-pane #profileeditor-search {
  max-width:100% !important; width:100% !important;
}

/* ----- 色板区 ----- */
.panel-tab-pane > .col-md-4,
.panel-tab-pane > .col-lg-4 {
  width:100%!important; padding:0 16px 12px!important; box-sizing:border-box; clear:both;
}
.panel-tab-pane #swatches { padding-top:4px; }
.panel-tab-pane #swatches .swatch { border-radius:2px; margin-right:2px; margin-bottom:2px; }

/* ----- 字符选择器 ----- */
.panel-tab-pane > .col-md-6,
.panel-tab-pane > .col-lg-6 {
  width:100%!important; padding:0 16px 12px!important; box-sizing:border-box; clear:both;
}
.panel-tab-pane #glyphScroller { max-height:180px; width:100%; box-sizing:border-box; border:1px solid #f0f0f0; border-radius:4px; }
.panel-tab-pane #picker-filter, .panel-tab-pane #picker-html {
  width:100%!important; height:28px!important; padding:2px 8px!important;
  border:1px solid #d9d9d9!important; border-radius:4px!important; font-size:12px!important;
}
.panel-tab-pane .alert { border-radius:4px; font-size:12px; padding:8px 12px; margin:8px 0; }

/* ----- Ace编辑器 ----- */
.panel-tab-pane .ace_editor { width:100%!important; font-size:12px!important; border-radius:4px; border:1px solid #d9d9d9; }
.panel-tab-pane #rawdata, .panel-tab-pane #customstyles {
  width:calc(100% - 32px)!important; height:calc(100vh - 280px)!important;
  min-height:250px!important; margin:0 16px; box-sizing:border-box;
}
.panel-tab-pane #noteseditor {
  width:calc(100% - 32px)!important; margin:0 16px; min-height:180px!important; box-sizing:border-box;
}
.panel-tab-pane .text-right { padding:8px 16px 0; }
.panel-tab-pane .text-right .btn {
  height:26px; padding:2px 10px; font-size:12px; border-radius:4px;
  border:1px solid #d9d9d9; background:#fff; color:#595959;
}
.panel-tab-pane .text-right .btn-success {
  background:#52c41a; border-color:#52c41a; color:#fff;
}
.panel-tab-pane .text-right .btn-success:hover { background:#73d13d; border-color:#73d13d; }
.panel-tab-pane .text-right .btn-primary {
  background:#1890ff; border-color:#1890ff; color:#fff;
}

/* ----- 键盘属性面板 ----- */
.panel-tab-pane #kbdproperties .form-horizontal .form-group { margin-bottom:10px; }
.panel-tab-pane #kbdproperties #kbdradiieditor { width:70px !important; max-width:70px !important; min-width:70px !important; flex-shrink:0; }
/* 外壳外观行：颜色选择器自适应宽度，不撑满，消除内部margin导致的对不齐问题 */
.panel-tab-pane #kbdproperties .form-outdent > .hint--top kbd-color-picker { flex-shrink:1; min-width:120px; }
.panel-tab-pane #kbdproperties .form-outdent > .hint--top kbd-color-picker .form-group { margin:0 !important; }
.panel-tab-pane #kbdproperties .form-outdent > .hint--top kbd-color-picker .input-group { width:100%; height:28px; }
.panel-tab-pane #kbdproperties .form-outdent > .hint--top kbd-color-picker .form-control { min-width:70px; }
.panel-tab-pane #kbdproperties .form-outdent > .hint--top kbd-color-picker .btn { height:28px !important; }
.panel-tab-pane #kbdproperties .form-outdent .checkbox label { font-size:12px; }

/* ----- 工具面板 ----- */
.panel-tab-pane #tools { padding:0 16px; }
.panel-tab-pane #tools .col-md-4, .panel-tab-pane #tools .col-lg-4,
.panel-tab-pane #tools .col-md-2, .panel-tab-pane #tools .col-lg-2 {
  float:none!important; width:100%!important; padding:0 0 12px!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box;
}
.panel-tab-pane #tools h5 { font-size:13px; font-weight:600; color:#262626; margin:12px 0 8px; padding:0; border-top:1px solid #f0f0f0; padding-top:12px; }
.panel-tab-pane #tools h5:first-child { border-top:none; padding-top:12px; margin-top:0; }
.panel-tab-pane #tools .btn-success {
  background:#fff !important; border:1px solid #d9d9d9 !important; color:#595959 !important;
  border-radius:4px !important; height:26px; padding:2px 10px; font-size:12px;
}
.panel-tab-pane #tools .btn-success:hover { border-color:#1890ff !important; color:#1890ff !important; background:#e6f7ff !important; }
.panel-tab-pane #label-move-src, .panel-tab-pane #label-move-dst, .panel-tab-pane #text-align {
  transform:scale(0.7); transform-origin:top left; margin-bottom:-30px;
}
.panel-tab-pane #summary { padding:0 16px 12px; }
.panel-tab-pane #summary .summarytable { width:100%; font-size:12px; margin:8px 0; }
.panel-tab-pane #summary .col-md-12 { padding:0; }
.panel-tab-pane #summary .btn-success { background:#52c41a !important; border-color:#52c41a !important; color:#fff !important; }

/* ----- 面板内btn样式统一AntD ----- */
.panel-tab-pane .btn {
  border-radius:4px !important; font-size:12px; transition:all 0.2s;
}

/* ----- 分隔线 ----- */
.panel-divider {
  height:1px; background:#f0f0f0; margin:8px 16px;
}

/* navbar隐藏 */
.navbar {
  display: none !important;
}

/* ===== 响应式：最小宽度1440 ===== */
@media (min-width: 1440px) {
  .app-main {
    padding: 16px;
  }
}

/* ===== 下拉菜单全局z-index ===== */
/* 核心功能：下拉菜单最大高度限制，过长时启用垂直滚动 */
.dropdown-menu {
  z-index: 2000 !important;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===== 滚动条美化 ===== */
.canvas-card-body::-webkit-scrollbar,
.panel-content::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.canvas-card-body::-webkit-scrollbar-thumb,
.panel-content::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}
.canvas-card-body::-webkit-scrollbar-track,
.panel-content::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== 图层管理面板样式 ===== */
#layer-manager {
  padding: 12px 16px;
}

/* 图层工具栏 */
.layer-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.layer-toolbar .btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.layer-toolbar .btn-primary {
  background: #1890ff;
  border-color: #1890ff;
  color: #fff;
}

.layer-toolbar .btn-primary:hover {
  background: #40a9ff;
  border-color: #40a9ff;
}

.layer-toolbar .btn-danger {
  background: #fff;
  border-color: #ffccc7;
  color: #ff4d4f;
}

.layer-toolbar .btn-danger:hover:not(:disabled) {
  background: #fff1f0;
  border-color: #ff4d4f;
}

.layer-toolbar .btn-success {
  background: #52c41a;
  border-color: #52c41a;
  color: #fff;
}

.layer-toolbar .btn-success:hover:not(:disabled) {
  background: #73d13d;
  border-color: #73d13d;
}

.layer-toolbar .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 图层参数调节 */
.layer-properties {
  margin-bottom: 16px;
}

.layer-properties .section-title {
  font-size: 13px;
  font-weight: 600;
  color: #262626;
  padding: 8px 0 4px;
  margin-bottom: 8px;
  border-top: 1px solid #f0f0f0;
}

.layer-properties .section-title:first-child {
  border-top: none;
}

.layer-properties .form-group {
  margin-bottom: 12px;
}

.layer-properties .control-label {
  font-size: 12px;
  color: #595959;
  margin-bottom: 4px;
}

.layer-properties .form-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 图层滑块 */
.layer-slider {
  flex: 1;
  min-width: 120px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #e8e8e8;
  border-radius: 3px;
  outline: none;
}

.layer-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #1890ff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.layer-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #1890ff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 图层数值输入框 */
.layer-input {
  width: 60px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  outline: none;
}

.layer-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
}

/* 单位 */
.layer-unit {
  font-size: 12px;
  color: #8c8c8c;
}

/* 图层列表 */
.layer-list {
  margin-top: 8px;
  max-height: 280px;
  overflow-y: auto;
}

/* 图层项 */
.layer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: #fafafa;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.layer-item:hover {
  background: #e6f7ff;
}

.layer-item.selected {
  background: #e6f7ff;
  border-color: #1890ff;
}

.layer-item.hidden {
  opacity: 0.5;
  display: flex !important; /* 覆盖kb.css中全局.hidden{display:none}，保持图层在列表中可见但半透明 */
}

/* 图层缩略图 */
.layer-thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  position: relative;
  overflow: hidden;
}

.layer-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #bfbfbf;
  font-size: 18px;
}

/* 图层信息 */
.layer-info {
  flex: 1;
  min-width: 0;
}

.layer-name {
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 图层操作按钮 */
.layer-actions {
  display: flex;
  gap: 4px;
}

.layer-visibility-btn,
.layer-delete-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: #8c8c8c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.layer-visibility-btn:hover {
  background: #d9d9d9;
  color: #1890ff;
}

.layer-delete-btn:hover {
  background: #fff1f0;
  color: #ff4d4f;
}

/* 空状态 */
.layer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #bfbfbf;
}

.layer-empty i {
  font-size: 32px;
  margin-bottom: 8px;
}

.layer-empty p {
  margin: 4px 0;
  font-size: 12px;
}

.layer-empty .hint {
  font-size: 11px;
  color: #d9d9d9;
}

/* 图层预览覆盖层（支持多图层同时显示） */
#layer-preview, .layer-preview-item {
  position: absolute;
  top: 0;
  left: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
  cursor: crosshair;
  transition: border 0.2s;
}

#layer-preview.hovering, .layer-preview-item.hovering {
  border: 2px dashed #ff0000;
}

#layer-preview.dragging, .layer-preview-item.dragging {
  border: 2px solid #ff0000;
  cursor: grabbing;
}

/* ===== 核心功能：右下角调整大小手柄 ===== */
.layer-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  background: linear-gradient(135deg, transparent 50%, rgba(24,144,255,0.7) 50%);
  border-radius: 0 0 6px 0;
}
.layer-resize-handle i {
  color: #fff;
  font-size: 10px;
  position: absolute;
  right: 3px;
  bottom: 3px;
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
/* 鼠标悬停在图层预览上时显示手柄 */
.layer-preview-item:hover .layer-resize-handle,
.layer-preview-item.resizing .layer-resize-handle,
#layer-preview:hover .layer-resize-handle {
  opacity: 1;
  pointer-events: auto;
}
.layer-preview-item.resizing {
  border: 2px dashed #1890ff;
}

/* 键帽顶部 */
.keytop {
  position: absolute;
  z-index: 1;
}

/* ===== 图层预览在编辑时需要在按键上方，方便拖拽定位（z:10）===== */
#keyboard-bg .layer-preview-item,
#keyboard-bg #layer-preview {
  z-index: 10 !important;
}

/* 键帽背景图（在字符下层，keytop上层） */
.keybgimage {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;  /* 确保图片不会溢出键帽圆角边界 */
  background-repeat: no-repeat;
}

/* 键帽字符标签 */
.keylabels {
  position: relative;
  z-index: 3;
}

.app-toast-wrapper {
  position: fixed !important;
  top: 80px !important;
  right: 20px !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 320px !important;
  pointer-events: none !important;
}

.app-toast {
  padding: 16px 20px !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: 0 !important;
  transform: translateX(120%) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  pointer-events: auto !important;
  position: relative !important;
  min-height: 48px !important;
  line-height: 1.5 !important;
}

.app-toast::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  border-radius: 8px 0 0 8px !important;
}

.app-toast-show {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.app-toast-success {
  background-color: #52c41a !important;
}

.app-toast-success::before {
  background-color: #389e0d !important;
}

.app-toast-info {
  background-color: #1890ff !important;
}

.app-toast-info::before {
  background-color: #096dd9 !important;
}

.app-toast-warning {
  background-color: #faad14 !important;
}

.app-toast-warning::before {
  background-color: #d48806 !important;
}

.app-toast-error {
  background-color: #ff4d4f !important;
}

.app-toast-error::before {
  background-color: #cf1322 !important;
}