/**
 * ============================================
 * 佳蓝故事魔法盒 - 主样式表
 * ============================================
 * 
 * 这是一个视频创作工具的主界面样式
 * 支持时间轴编辑、素材拖拽、实时预览、视频生成等功能
 * 
 * 文件结构：
 * 1. CSS变量定义（颜色主题）
 * 2. 全局样式重置
 * 3. 顶部导航栏
 * 4. 工作区布局（三栏布局）
 * 5. 素材库面板
 * 6. 预览窗口
 * 7. 时间轴控制
 * 8. 右侧面板（时间轴/项目/成果）
 * 9. 模态框和浮层
 * 10. 动画效果
 */

/* ============================================
   颜色变量定义（CSS变量，便于主题切换）
   ============================================ */
:root { 
  --bg-dark: #1a1a1d;        /* 深色背景 */
  --bg-mid: #2c2c34;          /* 中等背景 */
  --bg-light: #44444c;        /* 浅色背景 */
  --primary-accent: #6c5ce7;  /* 主色调（紫色） */
  --text-light: #f5f5f5;       /* 浅色文字 */
  --text-mid: #a9a9b3;        /* 中等文字 */
  --border-color: #3a3a42;    /* 边框颜色 */
}

/* ============================================
   全局样式重置
   ============================================ */

/* 页面基础设置：无边距、无滚动、深色背景、全屏高度 */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans SC', sans-serif;
  background: var(--bg-dark);
  color: var(--text-light);
  height: 100vh;
  height: 100dvh;  /* 动态视口高度，适配移动端 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 链接样式：去除下划线，设置悬停效果 */
a {
  color: var(--text-light);
  text-decoration: none;
}
a:hover {
  color: #fff;
  opacity: .9;
}

/* ============================================
   顶部导航栏样式
   ============================================ */

/* 主导航栏：固定在顶部，深色背景，左右布局 */
.main-header {
  background: var(--bg-mid);
  padding: 5px 20px;
  gap: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* Logo样式：大字体，粗体，带强调色 */
.logo {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--text-light);
}
.logo span {
  color: var(--primary-accent);
}

/* 头部操作按钮容器：水平排列，统一间距 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex:1;
}

/* 通用按钮样式：无背景，带边框，悬停效果 */
.header-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-mid);
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .2s;
}
.header-btn:hover {
  background: var(--bg-light);
  color: var(--text-light);
}

/* 生成按钮（主要操作）：紫色背景，白色文字 */
.generate-btn {
  background: var(--primary-accent);
  border-color: var(--primary-accent);
  color: #fff;
  font-weight: 500;
}
.generate-btn:hover {
  opacity: .9;
}

/* 个人中心下拉（首页统一样式） */
.user-menu { position: relative; }
.user-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: none;
  color: var(--text-mid);
  cursor: pointer;
  transition: all .2s;
}
.user-info-btn:hover { background: var(--bg-light); color: var(--text-light); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-accent); color: #fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;overflow:hidden;
}
.user-dropdown {
  position:absolute; right:0; top:100%; margin-top:6px; min-width: 180px;
  background: var(--bg-mid); border:1px solid var(--border-color); border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.35); display:none; z-index:1000;
}
.user-dropdown a, .user-dropdown button {
  display:block; width:100%; text-align:left; background:transparent; border:0;
  padding:10px 12px; color: var(--text-light); font-size:.95em; cursor:pointer;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--bg-light); color: var(--text-light); }
.user-dropdown .sep { height:1px; background: var(--border-color); margin:4px 0; }

/* 用户头像：圆形，紫色背景 */
.user-profile {
  width: 32px;
  height: 32px;
  background: var(--primary-accent);
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
}

/* ============================================
   工作区布局（三栏布局：左侧素材、中间预览、右侧时间轴）
   ============================================ */

/* 工作区容器：弹性布局，占据剩余空间 */
.workspace {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

/* ============================================
   左侧面板：素材库
   ============================================ */

/* 左侧面板：固定宽度，垂直布局 */
.panel-left {
  width: 25%;
  min-width: 300px;
  background: var(--bg-mid);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

/* 面板标题：深色背景，底部边框 */
.panel-header {
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 12px;
  color: #cbd5e1;
  font-weight: 600;
}

/* 面板内容区域（可滚动）：自定义滚动条样式 */
.panel-content {
  padding: 15px;
  overflow-y: auto;
  flex-grow: 1;
  scrollbar-color: var(--primary-accent) var(--bg-dark);
  scrollbar-width: thin;
}
/* 左侧素材面板：分类+搜索固定，仅素材列表滚动 */
.panel-left .panel-content { overflow: hidden; display: flex; flex-direction: column; }
#panel-assets { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#asset-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.asset-grid { flex: 1; min-height: 0; overflow: auto;overflow-x: hidden; }

/* WebKit浏览器滚动条样式 */
.panel-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.panel-content::-webkit-scrollbar-track {
  background: var(--bg-mid);
  border-radius: 8px;
}
.panel-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c6cf0, #6c5ce7);
  border-radius: 8px;
  border: 2px solid var(--bg-mid);
}
.panel-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8a7df3, #7c6cf0);
}

/* 搜索栏：相对定位，包含图标和输入框 */
.search-bar {
  position: relative;
  margin-bottom: 15px;
}
.search-bar input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px 10px 35px;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  color: var(--text-light);
}
.search-bar svg {
  position: absolute;
  left: 12px;
  top: 12px;
  fill: var(--text-mid);
}

/* 素材网格布局：自适应列数，最小100px */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

/* 素材项（可拖拽）：1:1宽高比，悬停效果 */
.asset-item {
  aspect-ratio: 1/1;
  background: var(--bg-light);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8em;
  text-align: center;
  padding: 6px;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
  outline: 1px solid rgba(148,163,184,.15);
  min-height: 100px;
}

/* 贴纸登场动画 */
@keyframes popIn { 
  0%{ transform: scale(.85); opacity:0 } 
  100%{ transform: scale(1); opacity:1 } 
}
.sticker-chip { 
  position:relative; 
  animation: popIn .18s ease-out both; 
}
.sticker-chip .x { 
  position:absolute; 
  right:-6px; 
  top:-6px; 
  width:16px; 
  height:16px; 
  border-radius:50%; 
  border:1px solid #334155; 
  background:#0b1220; 
  color:#cbd5e1; 
  font-size:11px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  cursor:pointer 
}

/* 素材项悬停效果：放大、阴影、边框高亮 */
.asset-item:hover { 
  transform: scale(1.03); 
  box-shadow: 0 6px 18px rgba(124,108,240,0.25); 
  outline-color: rgba(124,108,240,.55); 
  z-index: 1000;
  position: relative;
}

/* 素材占位符：深色渐变背景 */
.asset-item .ph { 
  width:58%; 
  height:58%; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  border-radius:12px; 
  background:linear-gradient(135deg,#1f2937,#0b1220); 
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); 
}
.asset-item .ph svg{ 
  width:64%; 
  height:64%; 
  fill:#9ba3af 
}

/* 素材标签：左下角，半透明背景 */
.asset-item .badge { 
  position:absolute; 
  left:6px; 
  bottom:6px; 
  font-size:.7em; 
  padding:2px 6px; 
  border-radius:999px; 
  background:#0b1220cc; 
  color:#cbd5e1; 
  border:1px solid #334155 
}
/* 素材名称标签：底部占位，单行省略，不换行不超出 */
.asset-item .name {
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  font-size:.78em;
  line-height:1.9;
  padding:0 8px;
  border-radius:6px;
  background:#0b1220cc;
  color:#e5e7eb;
  border:1px solid #334155;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

/* ============================================
   中间面板：预览窗口
   ============================================ */

/* 中间面板：弹性布局，垂直居中 */
.panel-center {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
}

/* 魔法输入区容器与工具条 */
.magic-input { 
  width: 100%; 
  margin: 6px 0 14px 0; 
}

/* 魔法输入框（带发光动画效果）*/
.magic-input textarea {
  width: 100%;
  box-sizing: border-box;
  height: 200px;
  background: var(--bg-dark);
  border: 1px solid var(--primary-accent);
  border-radius: 8px;
  color: var(--text-light);
  padding: 12px;
  resize: vertical;
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
  animation: glow 2.4s ease-in-out infinite;
}

/* 发光动画效果 */
@keyframes glow {
  0% {
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15), 0 0 12px rgba(108, 92, 231, 0.15);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.3), 0 0 18px rgba(108, 92, 231, 0.35);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15), 0 0 12px rgba(108, 92, 231, 0.15);
  }
}

/* 旋转动画（加载指示器） */
@keyframes spin { 
  from { transform: rotate(0deg); } 
  to { transform: rotate(360deg); } 
}

.magic-input p {
  font-size: .8em;
  color: var(--text-mid);
  margin-top: 5px;
}

/* 魔法工具栏：水平布局，可换行 */
.magic-toolbar { 
  display:flex; 
  gap:8px; 
  align-items:center; 
  margin-top:8px; 
  flex-wrap: wrap; 
}

/* 专业模式开关按钮 */
.pro-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid #334155;
  background:rgba(11,18,32,0.8);
  color:#e2e8f0;
  cursor:pointer;
  transition:all .25s ease;
  position:relative;
  box-shadow:0 8px 20px rgba(8,13,30,0.35);
}
.pro-toggle:hover{
  border-color:#475569;
  box-shadow:0 10px 24px rgba(15,23,42,0.45);
  color:#fff;
  background:rgba(15,23,42,0.85);
}
.pro-toggle__icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(124,108,240,0.22);
  font-size:16px;
  box-shadow:0 2px 6px rgba(124,108,240,0.35) inset;
}
.pro-toggle__text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  line-height:1.2;
}
.pro-toggle__label{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.01em;
}
.pro-toggle__state{
  font-size:11px;
  color:#8da2b8;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.pro-toggle--on{
  border-color:#7c6cf0;
  background:linear-gradient(135deg, rgba(124,108,240,0.95), rgba(99,83,226,0.9));
  color:#fff;
  box-shadow:0 14px 35px rgba(124,108,240,0.35);
}
.pro-toggle--on .pro-toggle__icon{
  background:rgba(12,18,36,0.3);
  box-shadow:none;
}
.pro-toggle--on .pro-toggle__state{
  color:#dbeafe;
}

/* 工具栏芯片按钮：圆角，暗色背景 */
.magic-toolbar .chip { 
  padding:6px 10px; 
  border:1px solid #334155; 
  color:#cbd5e1; 
  border-radius:999px; 
  background:#0b1220; 
  cursor:pointer; 
}
.magic-toolbar .chip:hover { 
  background:#0f172a; 
  color:#fff; 
}

/* 魔法操作按钮组 */
.magic-actions { 
  display:flex; 
  gap:8px; 
  align-items:center; 
  flex-wrap: wrap; 
}

/* 主操作按钮：紫色背景 */
.magic-actions .btn-main { 
  background: var(--primary-accent); 
  border: 1px solid var(--primary-accent); 
  color: #fff; 
  border-radius:8px; 
  padding:8px 14px; 
  cursor:pointer; 
}

/* 次要按钮：透明背景 */
.magic-actions .btn { 
  background: transparent; 
  border: 1px solid #334155; 
  color:#cbd5e1; 
  border-radius:8px; 
  padding:8px 12px; 
  cursor:pointer; 
}
.magic-actions .btn:hover { 
  background:#0b1220; 
  color:#fff; 
}

/* 预览窗口容器：16:9宽高比，渐变背景 */
.preview-window {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(180deg, #0f172a 20%, #1e293b 70%, #0b1220 100%);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mid);
  font-size: 1.2em;
  position: relative;
  overflow: hidden;
}

/* 魔法舞台氛围：柔光 + 细网格 */
.preview-window::before{ 
  content:""; 
  position:absolute; 
  inset:0; 
  background-image: linear-gradient(180deg, rgba(124,108,240,0.06), rgba(0,0,0,0)); 
  pointer-events:none; 
}
.preview-window::after{ 
  content:""; 
  position:absolute; 
  inset:0; 
  background-image:
    radial-gradient(circle at 50% 0%, rgba(124,108,240,0.18), rgba(0,0,0,0) 60%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px; 
  background-position: 0 0, 0 0, 0 0; 
  pointer-events:none; 
}

/* 预览画布：居中显示 */
.preview-window canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ============================================
   时间轴控制栏
   ============================================ */

/* 时间轴控制栏：深色背景，水平布局 */
.timeline-controls {
  background: var(--bg-mid);
  width: 100%;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
}

/* 控制按钮（播放/暂停/快进/快退）*/
.control-btn {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.2em;
  cursor: pointer;
}

/* 播放按钮（主要控制按钮，圆形渐变）*/
#ctl-play {
  font-size: 1.6em;
  background: linear-gradient(135deg, #6c5ce7, #7c6cf0);
  color: #fff;
  border: 1px solid #7c6cf0;
  border-radius: 999px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(124, 108, 240, 0.35);
}
#ctl-play:hover {
  filter: brightness(1.08);
}

/* 时间进度条：弹性布局，深色背景 */
.time-scrubber {
  flex-grow: 1;
  height: 15px;
  background: var(--bg-light);
  border-radius: 3px;
}

/* ============================================
   首次引导浮层
   ============================================ */

/* 引导浮层：全屏遮罩，居中显示 */
#onboard{ 
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,.55); 
  z-index:10000; 
  display:none; 
  align-items:center; 
  justify-content:center; 
}

/* 引导内容框 */
#onboard .box{ 
  background:#0b1220; 
  border:1px solid #334155; 
  border-radius:10px; 
  width:640px; 
  max-width:92vw; 
  padding:16px; 
  color:#e5e7eb; 
}
#onboard .box header{ 
  font-weight:700; 
  margin-bottom:6px; 
}
#onboard .box .acts{ 
  display:flex; 
  gap:8px; 
  justify-content:flex-end; 
  margin-top:10px; 
}

/* 引导按钮 */
#onboard .btn{ 
  background:transparent; 
  border:1px solid #334155; 
  color:#cbd5e1; 
  border-radius:8px; 
  padding:8px 12px; 
  cursor:pointer; 
}
#onboard .btn.primary{ 
  background: var(--primary-accent); 
  border-color: var(--primary-accent); 
  color:#fff; 
}

/* 脉冲动画（引导高亮）*/
.pulse{ 
  animation: pulse 1.6s ease-in-out infinite; 
}
@keyframes pulse{ 
  0%{ box-shadow: 0 0 0 0 rgba(108,92,231,.35);} 
  70%{ box-shadow: 0 0 0 6px rgba(108,92,231,0);} 
  100%{ box-shadow: 0 0 0 0 rgba(108,92,231,0);} 
}

/* ============================================
   右侧面板：时间轴/项目/成果
   ============================================ */

/* 右侧面板：固定宽度，垂直布局 */
.panel-right {
  width: 20%;
  min-width: 280px;
  background: var(--bg-mid);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

/* 标签页切换栏 */
.panel-tabs {
  display: flex;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-color);
}

/* 标签按钮：无背景，底部边框指示激活状态 */
.tab-btn {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-mid);
  cursor: pointer;
  font-size: .9em;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.tab-btn.active {
  color: var(--text-light);
  border-bottom-color: var(--primary-accent);
}

/* ============================================
   成果卡片
   ============================================ */

/* 成果卡片：半透明背景，圆角边框 */
.result-card {
  background: #111b;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  color: #e5e7eb;
}
.result-card header {
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 成果操作按钮组 */
.result-actions {
  display: flex;
  gap: 8px;
}
.result-actions a,
.result-actions button {
  background: transparent;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.result-actions a:hover,
.result-actions button:hover {
  background: #0b1220;
  color: #fff;
}

/* ============================================
   提示信息
   ============================================ */

/* 提示框：绿色背景，圆角边框 */
.notice {
  background: #153b24;
  color: #a7f3d0;
  border: 1px solid #0f5132;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0;
  display: none;
}

/* ============================================
   魔法阵加载动画（预览渲染仪式感）
   ============================================ */

/* 魔法阵容器 */
.magic-circle{ 
  position:relative; 
  width:56px; 
  height:56px; 
  animation: rotate 2.2s linear infinite; 
}

/* 魔法阵环：旋转动画 */
.magic-circle .ring{ 
  position:absolute; 
  inset:0; 
  border-radius:50%; 
  border:2px solid rgba(124,108,240,.45); 
  box-shadow: 0 0 12px rgba(124,108,240,.35) inset; 
}
.magic-circle .ring.r2{ 
  inset:6px; 
  border-color: rgba(124,108,240,.25); 
  animation-duration: 1.4s; 
  animation-direction: reverse; 
}

/* 魔法阵光点 */
.magic-circle .dot{ 
  position:absolute; 
  left:50%; 
  top:0; 
  width:6px; 
  height:6px; 
  margin-left:-3px; 
  background:#7c6cf0; 
  border-radius:50%; 
  box-shadow:0 0 10px #7c6cf0; 
  animation: spin 1.2s linear infinite; 
}

/* 旋转动画 */
@keyframes rotate { 
  from{ transform: rotate(0deg) } 
  to{ transform: rotate(360deg) } 
}

/* ============================================
   属性编辑表单样式
   ============================================ */

/* 表单容器 */
.prop-form {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 8px;
}

/* 表单分组 */
.prop-form-group {
  margin-bottom: 20px;
}

.prop-form-group:first-child {
  margin-top: 0;
}

/* 分组标题 */
.prop-form-group-title {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #334155;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 表单网格布局 */
.prop-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
}

/* 表单字段容器 */
.prop-form-field {
  display: flex;
  flex-direction: column;
}

/* 标签样式 */
.prop-form-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.prop-form-label-text {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2px;
}

/* 输入框样式 */
.prop-form-input {
  width: 100%;
  padding: 10px 12px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.prop-form-input:focus {
  outline: none;
  border-color: #7c6cf0;
  background: #111b;
  box-shadow: 0 0 0 3px rgba(124, 108, 240, 0.1);
}

.prop-form-input:hover:not(:disabled):not([readonly]) {
  border-color: #475569;
}

.prop-form-input:disabled,
.prop-form-input[readonly] {
  background: #0b1220;
  color: #64748b;
  cursor: not-allowed;
  opacity: 0.7;
}

.prop-form-input::placeholder {
  color: #64748b;
  opacity: 0.6;
}

/* 输入框验证状态 */
.prop-form-input:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.prop-form-input:valid:not(:placeholder-shown) {
  border-color: #10b981;
}

/* 帮助文本 */
.prop-form-help {
  color: #64748b;
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.4;
  opacity: 0.8;
}

/* 表单滚动条样式 */
.prop-form::-webkit-scrollbar {
  width: 6px;
}

.prop-form::-webkit-scrollbar-track {
  background: #0b1220;
  border-radius: 3px;
}

.prop-form::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 3px;
}

.prop-form::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ============================================
   时间轴拖拽手柄样式
   ============================================ */

.tl-drag-handle {
  cursor: grab;
  user-select: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.tl-drag-handle:hover {
  color: #7c6cf0 !important;
  background: rgba(124, 108, 240, 0.1);
}

.tl-drag-handle:active {
  cursor: grabbing;
  color: #6c5ce7 !important;
}

/* 拖拽中的行样式 */
.tl-row.dragging {
  opacity: 0.5;
  cursor: grabbing;
  border-color: #7c6cf0 !important;
}

/* 时间输入框拖拽状态 */
.tl-time-input.dragging {
  cursor: ns-resize !important;
  border-color: #7c6cf0 !important;
  background: rgba(124, 108, 240, 0.1) !important;
}