.screen-recorder[data-v-63a8c431] {
  z-index: 99999;
  font-size: 12px;
}

/* 录制时的小图标 */
.recorder-icon[data-v-63a8c431] {
  width: 60px;
  height: 60px;
  background: #ff4444;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
  animation: pulse-63a8c431 2s infinite;
  transition: transform 0.2s;
}
.recorder-icon[data-v-63a8c431]:hover {
  transform: scale(1.1);
}
.recording-dot[data-v-63a8c431] {
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  margin-bottom: 2px;
}
.step-count[data-v-63a8c431] {
  color: white;
  font-size: 10px;
  font-weight: bold;
}
@keyframes pulse-63a8c431 {
0% {
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
}
50% {
    box-shadow: 0 4px 20px rgba(255, 68, 68, 0.6);
}
100% {
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
}
}

/* 完整面板 */
.recorder-panel[data-v-63a8c431] {
  position: fixed;
  background: white;
  border: 2px solid #007cba;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 120px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 99999;
}
.recorder-panel.active[data-v-63a8c431] {
  background: #f0f8ff;
  border-color: #ff4444;
}
.recorder-panel.paused[data-v-63a8c431] {
  background: #fff8e1;
  border-color: #ffa726;
}
.panel-header[data-v-63a8c431] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  cursor: move;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border-radius: 4px 4px 0 0;
  margin: -10px -10px 8px -10px;
  padding: 8px 10px;
}
.panel-header[data-v-63a8c431]:hover {
  background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%);
}
.drag-handle[data-v-63a8c431] {
  font-size: 14px;
  color: #666;
  font-weight: bold;
  cursor: move;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-right: 5px;
}
.recording-status[data-v-63a8c431] {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: #ff4444;
  font-weight: bold;
}
.recording-status.paused[data-v-63a8c431] {
  color: #ffa726;
}
.minimize-btn[data-v-63a8c431] {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.minimize-btn[data-v-63a8c431]:hover {
  background: #e9e9e9;
}
.recorder-panel button[data-v-63a8c431] {
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 5px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
  cursor: pointer;
  font-size: 11px;
}
.recorder-panel button[data-v-63a8c431]:hover {
  background: #e9e9e9;
}
.recorder-panel button[data-v-63a8c431]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.language-selector[data-v-63a8c431] {
  margin-top: 8px;
  padding: 6px;
  background: #f0f0f0;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.language-selector label[data-v-63a8c431] {
  display: block;
  font-size: 10px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}
.language-selector select[data-v-63a8c431] {
  width: 100%;
  padding: 4px;
  font-size: 11px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: white;
  cursor: pointer;
}
.language-selector select[data-v-63a8c431]:focus {
  outline: none;
  border-color: #007cba;
}
.shortcut-tips[data-v-63a8c431] {
  margin-top: 8px;
  padding: 8px;
  background: linear-gradient(135deg, #e8f4fd 0%, #d4e9f7 100%);
  border-radius: 4px;
  border: 1px solid #b8d4e8;
  font-size: 9px;
}
.shortcut-tips .tip-title[data-v-63a8c431] {
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
  font-size: 10px;
  text-align: center;
}
.shortcut-tips .tip-item[data-v-63a8c431] {
  padding: 3px 5px;
  margin: 2px 0;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  color: #555;
  font-family: 'Courier New', monospace;
  border-left: 3px solid #3498db;
}
.step-indicator[data-v-63a8c431] {
  margin-top: 5px;
  padding: 3px 6px;
  background: #007cba;
  border-radius: 3px;
  font-size: 10px;
  text-align: center;
}


#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 0px;
}

/* 确保布局容器全屏 */
.h-screen {
  height: 100vh;
}

/* 滚动区域设置 */
.overflow-y-auto {
  overflow-y: auto;
  height: calc(100vh - 64px); /* 减去 header 高度 */
}
.user-info {
  margin-left: auto; /* 右对齐关键属性 */
}

/* 菜单背景色和hover色对调 */
.ant-dark-menu,
.ant-layout-sider-trigger,
.ant-layout-sider .ant-menu-dark {
  background-color: #2e353b !important;
}
.ant-menu-item{
  margin: 0 !important; 
  width:100% !important;
}
.ant-menu-submenu-title{
  margin: 0 !important;
}
.ant-layout-sider .ant-menu-dark .ant-menu-item:hover,
.ant-layout-sider .ant-menu-dark .ant-menu-submenu-title:hover,
.ant-layout-sider .ant-menu-dark .ant-menu-item-selected {
  background-color: #1890ff !important;
  border-radius: 0;
}

/* Header背景色设为白色 */
.header {
  background: white !important;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Content区域padding设置 */
.ant-layout-content.bg-gray-50 {
  padding: 10px !important;
}

/* 调整菜单文字颜色保持可读性 */
.ant-menu-dark .ant-menu-item a,
.ant-menu-dark .ant-menu-submenu-title {
  color: rgba(255, 255, 255, 0.9) !important;
}
.ant-menu-dark .ant-menu-item:hover a {
  color: #fff !important;
  text-decoration: none !important;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo {
  height: 30px;
}
.submenu-title-clickable{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
.menu-leaf-clickable { color: rgba(255,255,255,0.9); cursor: pointer;
}
.menu-leaf-clickable:hover { color:#fff;
}
.menu-leaf-clickable .anticon { color: inherit;
}