* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #0f1923;
  color: #e0e6ed;
  min-height: 100vh;
}

.header {
  background: linear-gradient(135deg, #1a2a3a 0%, #0d1b2a 100%);
  border-bottom: 2px solid #2196F3;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header h1 { font-size: 22px; color: #fff; font-weight: 600; }
.header h1 span { color: #2196F3; }
.header .subtitle { font-size: 12px; color: #8899aa; margin-top: 4px; }

/* ═══════════ 页头品牌区（logo + 标题）═══════════ */
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, .30),
    0 0 0 1px rgba(255, 255, 255, .10);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo:hover {
  transform: translateY(-1px);
  box-shadow:
    0 5px 20px rgba(0, 0, 0, .40),
    0 0 0 1px rgba(255, 255, 255, .16);
}

.brand-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.brand-sep {
  width: 1px;
  height: 42px;
  flex-shrink: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    #2a3a4a 20%,
    #2a3a4a 80%,
    transparent 100%);
}

.brand-text {
  min-width: 0;
}

/* 窄屏适配 */
@media (max-width: 1080px) {
  .brand { gap: 12px; }
  .brand-logo { padding: 6px 12px; }
  .brand-logo img { height: 34px; }
  .brand-sep { height: 36px; }
  .brand-text h1 { font-size: 19px; }
  .brand-text .subtitle { font-size: 11px; }
}

@media (max-width: 760px) {
  .brand-sep { display: none; }
  .brand-logo img { height: 30px; }
  .brand-text h1 { font-size: 17px; }
  .brand-text .subtitle { display: none; }
}


/* ═══════════ 右上角管理后台入口 ═══════════ */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-tagline {
  font-size: 12px;
  color: #667788;
  letter-spacing: .3px;
  white-space: nowrap;
}

.admin-entry {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
  border: 1px solid rgba(79, 172, 254, .38);
  box-shadow:
    0 4px 16px rgba(33, 150, 243, .32),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
  overflow: hidden;
}

.admin-entry:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #42A5F5 0%, #1976D2 100%);
  box-shadow:
    0 8px 26px rgba(33, 150, 243, .52),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}

.admin-entry:active {
  transform: translateY(0);
  box-shadow:
    0 3px 10px rgba(33, 150, 243, .38),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* 悬停时的高光扫过 */
.admin-entry::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, .22) 50%,
    transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.admin-entry:hover::after { opacity: 1; }

.admin-entry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.admin-entry-icon svg { display: block; }

/* 细微呼吸光效，吸引注意但不打扰 */
@keyframes adminBreath {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(33, 150, 243, .30),
      inset 0 1px 0 rgba(255, 255, 255, .14);
  }
  50% {
    box-shadow:
      0 4px 24px rgba(33, 150, 243, .52),
      inset 0 1px 0 rgba(255, 255, 255, .18);
  }
}
.admin-entry { animation: adminBreath 3.4s ease-in-out infinite; }
.admin-entry:hover { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .admin-entry { animation: none; }
}

/* 窄屏：隐藏标语，按钮缩一点 */
@media (max-width: 900px) {
  .header-tagline { display: none; }
  .header-actions { gap: 0; }
}
@media (max-width: 560px) {
  .admin-entry {
    padding: 9px 14px;
    font-size: 13px;
  }
  .admin-entry span:last-child { display: none; }
  .admin-entry { gap: 0; }
}


.tabs {
  display: flex;
  background: #1a2a3a;
  border-bottom: 1px solid #2a3a4a;
  padding: 0 32px;
  overflow-x: auto;              /* 窄屏横向滚动，避免文字竖排 */
  scrollbar-width: thin;
  scrollbar-color: #2a3a4a transparent;
}
.tabs::-webkit-scrollbar { height: 5px; }
.tabs::-webkit-scrollbar-thumb { background: #2a3a4a; border-radius: 3px; }
.tabs::-webkit-scrollbar-track { background: transparent; }
.tab {
  padding: 12px 24px;
  cursor: pointer;
  color: #8899aa;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;           /* 不换行 */
  flex-shrink: 0;                /* 不被压缩 */
}
.tab:hover { color: #fff; }
.tab.active { color: #2196F3; border-bottom-color: #2196F3; }

.container { padding: 24px 32px; max-width: 1600px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }

.card {
  background: #1a2a3a;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a3a4a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title::before {
  content: "";
  width: 4px; height: 16px;
  background: #2196F3;
  border-radius: 2px;
}

.form-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.form-group { flex: 1; min-width: 180px; }
.form-group label { display: block; font-size: 13px; color: #aabbcc; margin-bottom: 6px; }
.form-group input, .form-group select {
  width: 100%;
  padding: 8px 12px;
  background: #0f1923;
  border: 1px solid #2a3a4a;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: #2196F3; }

.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: #0f1923;
  border: 1px solid #2a3a4a;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.checkbox-item:hover { border-color: #2196F3; }
.checkbox-item input { accent-color: #2196F3; }
.checkbox-item.checked { border-color: #2196F3; background: rgba(33,150,243,0.1); }

.btn {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.btn-primary { background: #2196F3; color: #fff; }
.btn-primary:hover { background: #1976D2; }
.btn-success { background: #4CAF50; color: #fff; }
.btn-success:hover { background: #388E3C; }
.btn-secondary { background: #37474F; color: #fff; }
.btn-secondary:hover { background: #455A64; }
.btn-group { display: flex; gap: 12px; margin-top: 16px; }

.slider-group { display: flex; align-items: center; gap: 12px; }
.slider-group input[type="range"] { flex: 1; accent-color: #2196F3; }
.slider-value {
  min-width: 60px;
  text-align: center;
  background: #0f1923;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: #2196F3;
}

.upload-area {
  border: 2px dashed #2a3a4a;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #0f1923;
}
.upload-area:hover { border-color: #2196F3; background: rgba(33,150,243,0.05); }
.upload-area.dragover { border-color: #2196F3; background: rgba(33,150,243,0.1); }
.upload-icon { font-size: 48px; color: #2196F3; margin-bottom: 12px; }
.upload-text { font-size: 15px; color: #aabbcc; }
.upload-hint { font-size: 12px; color: #667788; margin-top: 8px; }
#fileInput { display: none; }

.parse-result { margin-top: 16px; }
.parse-summary {
  background: rgba(33,150,243,0.1);
  border: 1px solid #2196F3;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #64B5F6;
}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #2a3a4a;
  white-space: nowrap;
}
th {
  background: #243447;
  color: #aabbcc;
  font-weight: 600;
  position: sticky;
  top: 0;
}
tr:hover { background: rgba(33,150,243,0.05); }
.model-name { color: #2196F3; font-weight: 600; }

.diff-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.diff-good { background: rgba(76,175,80,0.2); color: #81C784; }
.diff-warn { background: rgba(255,152,0,0.2); color: #FFB74D; }
.diff-bad { background: rgba(244,67,54,0.2); color: #EF5350; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.product-card {
  background: #0f1923;
  border: 1px solid #2a3a4a;
  border-radius: 6px;
  padding: 16px;
  transition: all 0.2s;
}
.product-card:hover { border-color: #2196F3; transform: translateY(-2px); }
.product-card .model { font-size: 18px; font-weight: 700; color: #2196F3; margin-bottom: 4px; }
.product-card .full-model { font-size: 11px; color: #667788; margin-bottom: 12px; word-break: break-all; }
.product-card .type-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(33,150,243,0.15);
  color: #64B5F6;
  border-radius: 10px;
  font-size: 11px;
  margin-bottom: 12px;
}
.product-card .params { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.product-card .param-item { color: #aabbcc; }
.product-card .param-item span { color: #fff; font-weight: 500; }
.product-card .deviation {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #2a3a4a;
  display: flex;
  gap: 8px;
}

.group-header {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 20px 0 12px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(33,150,243,0.2), transparent);
  border-left: 3px solid #2196F3;
  border-radius: 0 4px 4px 0;
}
.group-header .count { font-size: 12px; color: #8899aa; font-weight: normal; margin-left: 8px; }

.search-box { margin-bottom: 16px; position: relative; }
.search-box input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  background: #0f1923;
  border: 1px solid #2a3a4a;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
}
.search-box::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

.empty-state { text-align: center; padding: 60px 20px; color: #667788; }
.empty-state .icon { font-size: 48px; margin-bottom: 16px; }

.toast {
  position: fixed;
  top: 20px; right: 20px;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 9999;
  animation: slideIn 0.3s;
}
.toast-success { background: #4CAF50; color: #fff; }
.toast-error { background: #F44336; color: #fff; }
.toast-info { background: #2196F3; color: #fff; }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== 智能问答样式 ===== */
.chat-message {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
}
.chat-user {
  background: rgba(33, 150, 243, 0.08);
  flex-direction: row-reverse;
}
.chat-ai {
  background: rgba(76, 175, 80, 0.05);
}
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a2a3a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.chat-user .chat-avatar {
  background: rgba(33, 150, 243, 0.2);
}
.chat-ai .chat-avatar {
  background: rgba(76, 175, 80, 0.2);
}
.chat-content {
  flex: 1;
  min-width: 0;
}
.chat-name {
  font-size: 12px;
  color: #8899aa;
  margin-bottom: 4px;
}
.chat-user .chat-name {
  text-align: right;
}
.chat-text {
  font-size: 14px;
  line-height: 1.7;
  color: #e0e6ed;
  word-break: break-word;
}
.chat-text strong {
  color: #4a9eff;
  font-weight: 600;
}
.chat-text table {
  width: 100%;
  margin: 8px 0;
  border-collapse: collapse;
  font-size: 13px;
}
.chat-text th, .chat-text td {
  padding: 6px 10px;
  border: 1px solid #2a3a4a;
  text-align: left;
}
.chat-text th {
  background: #243447;
  color: #aabbcc;
}
.chat-text ul, .chat-text ol {
  margin: 8px 0;
  padding-left: 20px;
}
.chat-text li {
  margin-bottom: 4px;
}
#ai-chat::-webkit-scrollbar {
  width: 6px;
}
#ai-chat::-webkit-scrollbar-track {
  background: #0f1923;
}
#ai-chat::-webkit-scrollbar-thumb {
  background: #2a3a4a;
  border-radius: 3px;
}

.footer {
  text-align: center;
  padding: 20px;
  color: #556677;
  font-size: 12px;
  border-top: 1px solid #2a3a4a;
  margin-top: 40px;
}

/* ===== 方案推荐 ===== */
.solution-summary h3 {
  color: #4da6ff;
  margin: 0 0 15px 0;
  font-size: 18px;
}
.solution-stats {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  flex-wrap: wrap;
}
.stat-item {
  background: #1a2a3a;
  padding: 15px 20px;
  border-radius: 8px;
  text-align: center;
  min-width: 100px;
  flex: 1;
}
.stat-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #4da6ff;
}
.stat-label {
  display: block;
  font-size: 12px;
  color: #8899aa;
  margin-top: 5px;
}
.solution-params {
  margin: 15px 0;
  padding: 10px;
  background: #0f1923;
  border-radius: 6px;
}
.param-tag {
  display: inline-block;
  background: #1a2a3a;
  padding: 4px 10px;
  border-radius: 4px;
  margin: 3px;
  font-size: 13px;
  color: #aabbcc;
}
.solution-part {
  margin: 25px 0;
}
.solution-part h4 {
  color: #66cc88;
  margin: 0 0 10px 0;
  font-size: 15px;
  border-left: 3px solid #66cc88;
  padding-left: 10px;
}
.solution-table, .bom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.solution-table th, .bom-table th {
  background: #1a2a3a;
  color: #8899aa;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid #2a3a4a;
  white-space: nowrap;
}
.solution-table td, .bom-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #1a2a3a;
  color: #ccddee;
}
.solution-table tr:hover, .bom-table tr:hover {
  background: #1a2530;
}
.joint-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}
.type-重载 {
  background: #4a2020;
  color: #ff6666;
}
.type-中载 {
  background: #4a3a20;
  color: #ffaa44;
}
.type-轻载 {
  background: #204a2a;
  color: #66cc88;
}
.rec-primary {
  color: #4da6ff;
  font-weight: bold;
  font-size: 12px;
}
.rec-alt {
  color: #8899aa;
  font-size: 11px;
  margin-top: 2px;
}
.no-rec {
  color: #ff6666;
  font-size: 12px;
}
.solution-bom {
  margin: 25px 0;
}
.solution-bom h4 {
  color: #ffaa44;
  margin: 0 0 10px 0;
  font-size: 15px;
  border-left: 3px solid #ffaa44;
  padding-left: 10px;
}
.solution-note {
  margin-top: 20px;
  padding: 15px;
  background: #1a2028;
  border-radius: 6px;
  border-left: 3px solid #ffaa44;
}
.solution-note p {
  margin: 0;
  color: #aabbcc;
  font-size: 13px;
  line-height: 1.6;
}
.table-responsive {
  overflow-x: auto;
}

/* 满足状态标签 */
.satisfaction-stats {
  margin-top: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}
.satisfaction-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  margin: 2px 5px 2px 0;
  font-weight: 500;
}
.status-exact {
  background: rgba(76, 175, 80, 0.2);
  color: #66bb66;
  border: 1px solid #4caf50;
}
.status-ok {
  background: rgba(33, 150, 243, 0.2);
  color: #66aaff;
  border: 1px solid #2196f3;
}
.status-over {
  background: rgba(255, 152, 0, 0.2);
  color: #ffaa44;
  border: 1px solid #ff9800;
}
.status-unknown {
  background: rgba(150, 150, 150, 0.2);
  color: #aaaaaa;
  border: 1px solid #999;
}

/* 快捷示例按钮 */
.prompt-example {
  padding: 4px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid #334;
  border-radius: 12px;
  color: #aabbcc;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.prompt-example:hover {
  background: rgba(255,170,68,0.15);
  border-color: #ffaa44;
  color: #ffaa44;
}


/* ===== 常见问题（FAQ）===== */
.faq-item {
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #0d1117;
  transition: border-color .2s;
}
.faq-item:hover { border-color: #3a5070; }

.faq-question {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  font-weight: 600;
  color: #e6edf3;
}
.faq-question:hover { background: #161b22; }

.faq-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(74, 158, 255, .15);
  color: #4a9eff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.faq-title { flex: 1; }
.faq-arrow { color: #4a9eff; font-size: 13px; flex-shrink: 0; }

.faq-answer {
  padding: 4px 18px 16px 48px;
  font-size: 14px;
  line-height: 1.85;
  color: #aabbcc;
  border-top: 1px solid #1e2a36;
}
.faq-answer p { margin: 8px 0; }
.faq-answer strong { color: #e6edf3; }
.faq-answer ol, .faq-answer ul { margin: 8px 0 8px 22px; }
.faq-answer li { margin: 5px 0; }



/* ═══════════ 支持中心样式 ═══════════ */

/* 子标签 */
.sup-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.sup-tab {
  padding: 9px 18px;
  background: #161b22;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  color: #8b949e;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s;
}
.sup-tab:hover { border-color: #3a5070; color: #c9d1d9; }
.sup-tab.active {
  background: rgba(74,158,255,.14);
  border-color: #4a9eff;
  color: #4a9eff;
  font-weight: 600;
}

.sup-panel { display: none; }
.sup-panel.active { display: block; }

/* 故障码 */
.sup-fault-item {
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #0d1117;
  overflow: hidden;
}
.sup-fault-item:hover { border-color: #3a5070; }

.sup-fault-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.sup-fault-head:hover { background: #161b22; }

.sup-fault-badge {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 10px;
  background: rgba(74,158,255,.14);
  color: #4a9eff;
  flex-shrink: 0;
  white-space: nowrap;
}
.sup-fault-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #e6edf3;
}
.sup-fault-arrow { color: #4a9eff; font-size: 13px; flex-shrink: 0; }

.sup-fault-body {
  padding: 4px 18px 16px 18px;
  border-top: 1px solid #1e2a36;
}
.sup-block { margin: 14px 0; }
.sup-block-title {
  font-size: 13px;
  font-weight: 600;
  color: #79c0ff;
  margin-bottom: 8px;
}
.sup-block ol { margin-left: 20px; }
.sup-block li {
  font-size: 13.5px;
  line-height: 1.8;
  color: #aabbcc;
  margin: 5px 0;
}
.sup-block-fix {
  background: rgba(126,231,135,.06);
  border-left: 3px solid #238636;
  padding: 10px 14px;
  border-radius: 4px;
}
.sup-block-fix p { font-size: 13.5px; line-height: 1.8; color: #b8d8c0; }

/* 排障向导 */
.sup-sym-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.sup-sym-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #0d1117;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .18s;
}
.sup-sym-btn:hover { border-color: #4a9eff; background: rgba(74,158,255,.06); }
.sup-sym-label { color: #e6edf3; font-size: 15px; font-weight: 600; }
.sup-sym-en { color: #667788; font-size: 12px; }

.sup-tshoot-path {
  font-size: 12px;
  color: #667788;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.sup-tshoot-path span {
  background: #161b22;
  padding: 2px 8px;
  border-radius: 10px;
  color: #8b949e;
}
.sup-tshoot-path i { color: #3a5070; font-style: normal; }

.sup-tshoot-ask {
  font-size: 16px;
  color: #e6edf3;
  line-height: 1.7;
  margin-bottom: 18px;
  padding: 16px 18px;
  background: #0d1117;
  border-left: 3px solid #4a9eff;
  border-radius: 4px;
}
.sup-tshoot-opts { display: flex; flex-direction: column; gap: 10px; }
.sup-opt-btn {
  padding: 13px 18px;
  background: #161b22;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  color: #c9d1d9;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .18s;
}
.sup-opt-btn:hover { border-color: #4a9eff; background: rgba(74,158,255,.08); }

.sup-tshoot-result {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: rgba(126,231,135,.06);
  border: 1px solid #238636;
  border-radius: 8px;
}
.sup-result-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #238636;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sup-result-text { font-size: 14.5px; line-height: 1.85; color: #b8d8c0; }

/* 参数说明 */
.sup-field-item {
  padding: 13px 16px;
  border-bottom: 1px solid #1e2a36;
}
.sup-field-item:last-child { border-bottom: none; }
.sup-field-key {
  font-family: Consolas, monospace;
  font-size: 13.5px;
  color: #79c0ff;
  margin-bottom: 5px;
}
.sup-field-zh { font-size: 13.5px; color: #c9d1d9; line-height: 1.75; }
.sup-field-en {
  font-size: 12px;
  color: #5c7488;
  line-height: 1.7;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed #1e2a36;
}

/* 教程 */
.sup-guide-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #1e2a36;
}
.sup-guide-item:last-child { border-bottom: none; }
.sup-guide-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(74,158,255,.14);
  color: #4a9eff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  flex-shrink: 0;
}
.sup-guide-main { flex: 1; min-width: 0; }
.sup-guide-title { font-size: 15px; font-weight: 600; color: #e6edf3; margin-bottom: 6px; }
.sup-guide-desc { font-size: 13px; color: #8b949e; line-height: 1.75; margin-bottom: 10px; }
.sup-guide-video {
  width: 100%;
  max-width: 560px;
  border-radius: 8px;
  background: #000;
  display: block;
}
.sup-guide-novideo {
  font-size: 12px;
  color: #667788;
  padding: 8px 12px;
  background: #161b22;
  border-radius: 6px;
  display: inline-block;
}


/* ═══════════ 工况校核 ═══════════ */
.env-wrap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .env-wrap { grid-template-columns: 1fr; }
}

.env-desc {
  color: #8899aa;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.env-field {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.env-field label {
  font-size: 13px;
  color: #aabbcc;
}
.env-field input,
.env-field select {
  width: 100%;
  padding: 8px 10px;
  background: #0d1117;
  border: 1px solid #2a3a4a;
  border-radius: 6px;
  color: #e6edf3;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.env-field input:focus,
.env-field select:focus {
  outline: none;
  border-color: #4a9eff;
}
.env-field select { cursor: pointer; }
.env-unit {
  font-size: 11px;
  color: #667788;
  text-align: left;
}

.env-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #aabbcc;
  margin: 16px 0;
  cursor: pointer;
}
.env-check input { width: 16px; height: 16px; cursor: pointer; }

.env-actions { margin-top: 6px; }
.env-actions .btn { width: 100%; }

.env-result { min-width: 0; }

/* 结论标签 */
.env-verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.env-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
}
.env-tag-ok {
  background: rgba(63, 185, 80, .14);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, .4);
}
.env-tag-warn {
  background: rgba(210, 153, 34, .14);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, .4);
}
.env-tag-bad {
  background: rgba(248, 81, 73, .14);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, .45);
}
.env-tag-muted {
  background: #161b22;
  color: #667788;
  border: 1px solid #2a3a4a;
}
.env-model-name {
  font-family: Consolas, monospace;
  font-size: 13px;
  color: #8b949e;
}
.env-point-badge {
  margin-left: auto;
  padding: 4px 12px;
  background: #161b22;
  border: 1px solid #2a3a4a;
  border-radius: 6px;
  font-size: 12.5px;
  color: #e6edf3;
  font-family: Consolas, monospace;
}

/* 图表 */
#env-chart {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: #0d1117;
  border: 1px solid #1e2a36;
}

.env-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: #8b949e;
}
.env-legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 2px;
}
.env-legend .lg-peak { background: #58a6ff; }
.env-legend .lg-cont {
  background: repeating-linear-gradient(90deg, #3fb950 0 5px, transparent 5px 9px);
}
.env-legend .lg-region {
  height: 10px;
  background: rgba(46, 160, 67, .22);
  border: 1px solid rgba(63, 185, 80, .35);
}

/* 明细卡片 */
.env-finding {
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 10px;
  border-left: 3px solid;
  background: #0d1117;
}
.env-finding-title {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.env-finding-text {
  font-size: 13px;
  line-height: 1.7;
  color: #aabbcc;
}
.env-finding-danger { border-left-color: #f85149; background: rgba(248, 81, 73, .06); }
.env-finding-danger .env-finding-title { color: #f85149; }
.env-finding-warn { border-left-color: #d29922; background: rgba(210, 153, 34, .06); }
.env-finding-warn .env-finding-title { color: #d29922; }
.env-finding-ok { border-left-color: #3fb950; background: rgba(63, 185, 80, .06); }
.env-finding-ok .env-finding-title { color: #3fb950; }

/* 扭矩不足 / 转速不足 / 无满足型号 */
.status-bad {
  background: rgba(248, 81, 73, .14);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, .4);
}
/* ═══════════ 占空比校核 ═══════════ */
.duty-head {
  display: grid;
  grid-template-columns: 1fr 1fr 34px;
  gap: 8px;
  font-size: 11px;
  color: #667788;
  margin-bottom: 6px;
  padding: 0 2px;
}
.duty-row {
  display: grid;
  grid-template-columns: 1fr 1fr 34px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.duty-row input {
  width: 100%;
  padding: 8px 10px;
  background: #0d1117;
  border: 1px solid #2a3a4a;
  border-radius: 6px;
  color: #e6edf3;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.duty-row input:focus { outline: none; border-color: #4a9eff; }
.duty-del {
  width: 30px;
  height: 30px;
  background: #161b22;
  border: 1px solid #2a3a4a;
  border-radius: 6px;
  color: #8b949e;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 0;
}
.duty-del:hover { border-color: #f85149; color: #f85149; }

.duty-summary {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}
.duty-kv {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.duty-kv span {
  font-size: 11.5px;
  color: #667788;
}
.duty-kv b {
  font-size: 17px;
  color: #e6edf3;
  font-family: Consolas, monospace;
}

.duty-metric { margin-bottom: 14px; }
.duty-metric-label {
  font-size: 12.5px;
  color: #aabbcc;
  margin-bottom: 6px;
}
.duty-metric-label b { color: #e6edf3; }
.duty-bar {
  height: 14px;
  background: #161b22;
  border: 1px solid #2a3a4a;
  border-radius: 7px;
  overflow: hidden;
}
.duty-bar i {
  display: block;
  height: 100%;
  border-radius: 6px;
  transition: width .25s ease;
}

.duty-fits {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #1e2a36;
}
.duty-fits-title {
  font-size: 12.5px;
  color: #79c0ff;
  margin-bottom: 10px;
}
.duty-fit-item {
  display: grid;
  grid-template-columns: 130px 1fr 80px 70px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: #0d1117;
  margin-bottom: 4px;
  font-size: 12.5px;
}
.duty-fit-item:hover { background: #161b22; }
.duty-fit-name {
  font-family: Consolas, monospace;
  color: #e6edf3;
}
.duty-fit-spec { color: #8b949e; }

/* ═══════════ 关节选型 ═══════════ */
.js-kv-list {
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  background: #0d1117;
  padding: 4px 16px;
  margin-bottom: 20px;
}
.js-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #161b22;
  font-size: 13.5px;
}
.js-kv:last-child { border-bottom: none; }
.js-kv span { color: #8b949e; }
.js-kv b {
  color: #e6edf3;
  font-family: Consolas, monospace;
  font-size: 14px;
}
.js-kv b.js-strong {
  color: #4a9eff;
  font-size: 15px;
}

.js-list-title {
  font-size: 13px;
  color: #79c0ff;
  margin-bottom: 10px;
}

.js-list { display: flex; flex-direction: column; gap: 8px; }

.js-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: #0d1117;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  transition: border-color .18s, background .18s;
}
.js-item:hover { border-color: #3a5070; background: #11161d; }

.js-item-main { min-width: 0; }
.js-item-name {
  font-family: Consolas, monospace;
  font-size: 14px;
  color: #e6edf3;
  margin-bottom: 4px;
}
.js-item-spec {
  font-size: 12px;
  color: #667788;
  line-height: 1.6;
}
.js-item-headroom {
  flex-shrink: 0;
  font-size: 12.5px;
  color: #3fb950;
  font-weight: 600;
  white-space: nowrap;
}

.js-more {
  text-align: center;
  padding: 10px;
  margin-top: 4px;
  color: #4a9eff;
  font-size: 13px;
  cursor: pointer;
  border: 1px dashed #2a3a4a;
  border-radius: 8px;
}
.js-more:hover { border-color: #4a9eff; background: rgba(74,158,255,.06); }

.js-accel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  font-size: 13px;
  color: #aabbcc;
  cursor: pointer;
}
.js-accel-row input { width: 16px; height: 16px; cursor: pointer; }
.js-accel-time {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr) 34px;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

/* ═══════════ Build-a-Bot 拼装 ═══════════ */
.bb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bb-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bb-toolbar-left label {
  font-size: 13px;
  color: #8b949e;
}
.bb-toolbar-left select {
  padding: 9px 14px;
  background: #0d1117;
  border: 1px solid #2a3a4a;
  border-radius: 7px;
  color: #e6edf3;
  font-size: 14px;
  font-family: inherit;
  min-width: 180px;
}
.bb-toolbar-right {
  font-size: 13px;
  color: #8b949e;
}
.bb-toolbar-right b { color: #e6edf3; }
.bb-problem { color: #f0883e; }
.bb-ok { color: #3fb950; }

.bb-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.bb-col-title {
  font-size: 12px;
  color: #667788;
  letter-spacing: .5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bb-col-title input {
  flex: 1;
  max-width: 180px;
  padding: 7px 10px;
  background: #0d1117;
  border: 1px solid #2a3a4a;
  border-radius: 6px;
  color: #e6edf3;
  font-size: 12.5px;
  font-family: inherit;
}
.bb-col-title input:focus { outline: none; border-color: #4a9eff; }

/* 左栏 */
.bb-slots {
  background: #0d1117;
  border: 1px solid #1e2a36;
  border-radius: 10px;
  padding: 14px 12px;
  max-height: 620px;
  overflow-y: auto;
}
.bb-slot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 3px;
  transition: background .15s, border-color .15s;
}
.bb-slot:hover { background: #161b22; }
.bb-slot.sel { background: rgba(74, 158, 255, .12); border-color: rgba(74, 158, 255, .45); }
.bb-slot-no {
  flex-shrink: 0;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #21262d;
  color: #8b949e;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.bb-slot.sel .bb-slot-no { background: #4a9eff; color: #06121f; font-weight: 700; }
.bb-slot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-slot-name {
  font-size: 12.5px;
  color: #c9d1d9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-slot-motor {
  font-size: 11px;
  font-family: Consolas, monospace;
  color: #667788;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-slot.ok .bb-slot-motor { color: #3fb950; }
.bb-slot.warn .bb-slot-motor { color: #f0883e; }
.bb-slot.empty .bb-slot-motor { color: #6e7681; }
.bb-slot-need {
  flex-shrink: 0;
  font-size: 10.5px;
  color: #4a5a6a;
  font-family: Consolas, monospace;
}

/* 中栏 */
.bb-library {
  background: #0d1117;
  border: 1px solid #1e2a36;
  border-radius: 10px;
  padding: 14px 12px;
  max-height: 620px;
  overflow-y: auto;
}
.bb-lib-item {
  padding: 9px 11px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid #1e2a36;
  margin-bottom: 5px;
  background: #11161d;
  transition: border-color .15s, background .15s;
}
.bb-lib-item:hover { border-color: #4a9eff; background: #161b22; }
.bb-lib-item.used { border-color: rgba(63, 185, 80, .35); }
.bb-lib-name {
  font-family: Consolas, monospace;
  font-size: 13px;
  color: #e6edf3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bb-used-tag {
  font-size: 10px;
  font-family: inherit;
  background: rgba(63, 185, 80, .15);
  color: #3fb950;
  padding: 1px 6px;
  border-radius: 10px;
}
.bb-lib-spec {
  font-size: 11.5px;
  color: #667788;
  margin-top: 3px;
}

/* 右栏 */
.bb-summary-col {
  background: #0d1117;
  border: 1px solid #1e2a36;
  border-radius: 10px;
  padding: 14px;
}
.bb-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #161b22;
  font-size: 12.5px;
}
.bb-kv:last-of-type { border-bottom: none; }
.bb-kv span { color: #8b949e; }
.bb-kv b {
  color: #e6edf3;
  font-family: Consolas, monospace;
  font-size: 13px;
  text-align: right;
}
.bb-kv b.bb-strong { color: #4a9eff; font-size: 14px; }

.bb-problems {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #1e2a36;
}
.bb-problem-line {
  font-size: 11.5px;
  color: #f0883e;
  line-height: 1.7;
}

.bb-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.bb-actions button {
  width: 100%;
  padding: 10px;
  background: #161b22;
  border: 1px solid #2a3a4a;
  border-radius: 7px;
  color: #c9d1d9;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bb-actions button:hover { border-color: #4a9eff; background: #1c2430; }
.bb-actions button:first-child {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  border-color: transparent;
  color: #fff;
  font-weight: 500;
}
.bb-actions button:first-child:hover { filter: brightness(1.1); }

/* 下栏 */
.bb-detail {
  margin-top: 16px;
  background: #0d1117;
  border: 1px solid #1e2a36;
  border-radius: 10px;
  padding: 16px;
}
.bb-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.bb-detail-title {
  font-size: 15px;
  color: #e6edf3;
  font-weight: 600;
  margin-bottom: 5px;
}
.bb-detail-need {
  font-size: 12px;
  color: #8b949e;
}
.bb-detail-current {
  font-family: Consolas, monospace;
  font-size: 16px;
  color: #4a9eff;
}
.bb-detail-spec {
  font-size: 12.5px;
  color: #8b949e;
  margin-top: 10px;
  line-height: 1.7;
}
.bb-detail-warn {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  background: rgba(248, 81, 73, .1);
  border: 1px solid rgba(248, 81, 73, .3);
  color: #ff9f9a;
  font-size: 12.5px;
}
.bb-detail-actions { margin-top: 10px; }
.bb-mini {
  padding: 5px 14px;
  background: #161b22;
  border: 1px solid #2a3a4a;
  border-radius: 6px;
  color: #8b949e;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.bb-mini:hover { border-color: #f85149; color: #f85149; }

.bb-detail-sub {
  font-size: 12px;
  color: #79c0ff;
  margin: 18px 0 10px;
}
.bb-alt-list { display: flex; flex-direction: column; gap: 5px; }
.bb-alt {
  display: grid;
  grid-template-columns: 140px 1fr 90px 90px 60px;
  gap: 10px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 7px;
  background: #11161d;
  border: 1px solid #1e2a36;
  cursor: pointer;
  font-size: 12.5px;
  transition: border-color .15s;
}
.bb-alt:hover { border-color: #4a9eff; }
.bb-alt.cur { border-color: rgba(74, 158, 255, .5); background: rgba(74, 158, 255, .08); }
.bb-alt-name { font-family: Consolas, monospace; color: #e6edf3; }
.bb-alt-spec { color: #8b949e; }
.bb-alt-cur { color: #4a9eff; font-size: 11px; }

.bb-empty {
  font-size: 12.5px;
  color: #6e7681;
  padding: 12px 4px;
}

@media (max-width: 1100px) {
  .bb-layout { grid-template-columns: 1fr; }
  .bb-slots, .bb-library { max-height: 340px; }
  .bb-alt { grid-template-columns: 120px 1fr 70px; }
  .bb-alt-spec:nth-of-type(3), .bb-alt-cur { display: none; }
}