/* --- 全局与重置 --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: #0f0f13; color: #e8e4dc; height: 100vh; display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; }
input, textarea, select, button { font-family: inherit; }
::-webkit-scrollbar { width: 5px; height: 5px;}
::-webkit-scrollbar-thumb { background: #2a2a35; border-radius: 4px; }

/* --- 顶部导航 --- */
.topnav { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #2a2a35; background: #0f0f13; min-height: 52px; flex-shrink: 0; z-index: 100;}
.logo { font-size: 15px; font-weight: 600; color: #f0ebe0; display: flex; align-items: center; gap: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #c9a96e; }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.nav-btn { background: #2a2a35; border: 1px solid #3a3a4a; color: #a09898; font-size: 12px; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center;}
.nav-btn:hover { background: #3a3a4a; color: #e8e4dc; border-color: #c9a96e; }
.api-badge { font-size: 12px; padding: 5px 10px; border-radius: 6px; background: #2a2a35; color: #6b6878; cursor: pointer; border: 1px solid #3a3a4a;}
.api-badge.ok { background: #1a2e1a; color: #7ec97e; border-color: #2e4e2e; }

.btn-mobile-menu, .btn-mobile-validator { display: none; background: transparent; border: none; font-size: 18px; cursor: pointer; }
.btn-mobile-menu { color: #c9a96e; }
.btn-mobile-validator { color: #e07070; font-size: 12px; border: 1px solid #e07070; padding: 4px 8px; border-radius: 4px;}

/* --- 主体三栏布局 --- */
.main { flex: 1; display: flex; overflow: hidden; position: relative;}
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 800; backdrop-filter: blur(2px);}

/* 左右侧边栏通用样式 */
.sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; background: #0c0c10; padding: 15px; padding-bottom: 150px; z-index: 900;}
.left-sidebar { border-right: 1px solid #1c1c24; }
.right-sidebar { border-left: 1px solid #1c1c24; background: #111116;}

.tree-title-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6b6878; margin-bottom: 20px; font-weight: bold;}
.add-btn { color: #c9a96e; cursor: pointer; font-size: 12px; padding: 4px 6px; border-radius:4px; transition: 0.2s;}
.add-btn:hover { background: #2a2a35;}

/* 中间工作区 */
.workspace { flex: 1; position: relative; background: #0f0f13; overflow-y: auto; overflow-x: hidden; }
.timeline-container { position: relative; width: 100%; min-height: 1000px; padding: 80px 0 150px 0; }
.center-axis { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgba(255,255,255,0.08); transform: translateX(-50%); z-index: 0; }
.axis-title { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); background: #0f0f13; padding: 6px 16px; color: #6b6878; font-size: 12px; border: 1px solid #2a2a35; border-radius: 20px; z-index: 2;}

/* --- 质检卡片 (右侧栏专属) --- */
.qa-card { background: #1a1a24; border: 1px solid #2a2a35; border-radius: 8px; padding: 12px; margin-bottom: 15px;}
.qa-title { font-size: 13px; font-weight: 600; color: #f0ebe0; margin-bottom: 8px;}
.qa-status { font-size: 12px; color: #a09898; background: #0f0f13; padding: 8px; border-radius: 4px; line-height: 1.4;}
.qa-status.error { color: #e07070; background: #2a1a1a; border: 1px solid #5a3030;}
.qa-status.ok { color: #7ec97e; background: #1a2e1a; border: 1px solid #2e4e2e;}

/* --- 弹窗与表单 --- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; padding: 20px;}
.modal-overlay.open { display: flex; }
.modal-box { display: flex; flex-direction: column; background: #14141a; border: 1px solid #2a2a35; border-radius: 12px; width: 100%; max-width: 480px; box-shadow: 0 12px 48px rgba(0,0,0,0.8); }
.modal-header { padding: 20px 24px 15px; border-bottom: 1px solid #2a2a35; }
.modal-title { font-size: 16px; font-weight: 600; color: #f0ebe0; }
.modal-body { padding: 20px 24px; overflow-y: auto; }
.modal-footer { padding: 15px 24px 20px; border-top: 1px solid #2a2a35; display: flex; gap: 12px; }
.modal-field { margin-bottom: 18px; }
.modal-field label { display: block; font-size: 12px; color: #a09898; margin-bottom: 8px; font-weight: bold;}
.modal-field input, .modal-field textarea { width: 100%; background: #0f0f13; border: 1px solid #2a2a35; border-radius: 6px; padding: 12px 14px; color: #e8e4dc; font-size: 13px; outline: none; }
.modal-field textarea { min-height: 80px; resize: vertical; }

.modal-btn { flex: 1; padding: 12px; border-radius: 6px; font-size: 14px; cursor: pointer; border: none; font-weight: 600;}
.btn-primary { background: #c9a96e; color: #0f0f13; }
.btn-ghost { background: transparent; border: 1px solid #3a3a4a; color: #a09898; }
.btn-danger { background: rgba(224, 112, 112, 0.1); border: 1px solid rgba(224, 112, 112, 0.3); color: #e07070;}
.btn-ai-run { background: #2e4e2e22; border: 1px solid #2e4e2e; color: #7ec97e; border-radius: 6px; padding: 12px; font-size: 14px; cursor: pointer; width: 100%;}
.btn-sm-run { padding: 8px; font-size: 12px; }

/* 提示悬浮窗 */
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #c9a96e; color: #000; padding: 12px 24px; border-radius: 30px; font-size: 14px; font-weight: bold; opacity: 0; pointer-events: none; transition: 0.3s; z-index: 3000;}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(15px); }

/* --- 📱 移动端与平板竖屏适配 --- */
@media (max-width: 850px) {
  .btn-mobile-menu, .btn-mobile-validator { display: block; }
  .topnav .nav-btn span { display: none; } /* 隐藏文字，只留图标 */
  
  /* 左侧抽屉 */
  .left-sidebar { position: fixed; left: -100%; top: 52px; height: calc(100vh - 52px); transition: 0.3s ease; box-shadow: 5px 0 15px rgba(0,0,0,0.5);}
  .left-sidebar.open { left: 0; }
  
  /* 右侧质检抽屉 */
  .right-sidebar { position: fixed; right: -100%; top: 52px; height: calc(100vh - 52px); transition: 0.3s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.5);}
  .right-sidebar.open { right: 0; }

  .mobile-overlay.open { display: block; }
}