/* 基础排版与主题 */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  background: #0f1115;
  color: #e6e6e6;
}

/* 布局与容器 */
.container { max-width: 1040px; margin: 0 auto; padding: 16px; }
.header, .footer { padding: 8px 0; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 12px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.panel { background: #1a1f29; border: 1px solid #2a3240; border-radius: 8px; padding: 16px; }
.rule-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
#ruleName { font-weight: 600; color: #9fd3ff; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

/* 鬼仆分组与子面板 */
.ghost-section { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.subpanel { border: 1px solid #2a3240; border-radius: 8px; padding: 12px; background: #141922; }
.section-title { font-weight: 600; color: #cfe1ff; margin-bottom: 8px; }
.inline { display: flex; gap: 8px; align-items: center; }
/* 初始品质列加宽 */
.quality-wrap { flex: 1 0 240px; }
.quality-wrap select { width: 100%; }
select.invalid { border-color: #b95050; }
small.hint { color: #b8c1cc; }
small.error { color: #ff9a9a; }

/* 表单控件与按钮 */
label { font-size: 13px; color: #b8c1cc; }
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #2a3240;
  border-radius: 6px;
  background: #0f131b;
  color: #e6e6e6;
  font-size: 14px;
}
.actions { display: flex; gap: 8px; margin-top: 8px; }
button {
  padding: 8px 12px;
  border: 1px solid #2a3240;
  border-radius: 6px;
  background: #243043;
  color: #e6e6e6;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: #2b374d; }

/* 结果展示 */
.result-row { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px dashed #2a3240; }
.result-name { color: #b8c1cc; }
.result-value { font-weight: 600; color: #9fe69f; }

/* 升级清单（ROI） */
.roi-section { margin-top: 16px; }
.roi-summary { margin-bottom: 8px; color: #b8c1cc; }
.roi-table { width: 100%; border-collapse: collapse; }
.roi-table th, .roi-table td { border: 1px solid #2a3240; padding: 8px; text-align: center; font-size: 13px; }
.roi-table th { background: #1c2533; position: sticky; top: 0; }
.pos-main { background-color: #fff1f0; color: #cf1322; }
.pos-g1 { background-color: #f6ffed; color: #389e0d; }
.pos-g2 { background-color: #e6f7ff; color: #096dd9; }
.over-budget { background-color: #3b1f1f; }
.over-budget td { color: #ff9a9a; }
.roi-detail { text-align: left; padding: 8px; font-size: 12px; color: #b8c1cc; border-top: 1px dashed #2a3240; }
.roi-detail-row { background: #12161e; }
.roi-detail-row td { color: #cfd6e6; }
.config-panel .section-title { margin-bottom: 8px; }
.config-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.config-grid .header { font-weight: 600; color: #d6dbe4; }
.config-item { display: contents; }
.missing-red { background-color: #2a1e1e; color: #ffb3b3; }
.config-actions { display: flex; gap: 8px; margin-top: 8px; }
.two-col { display: flex; gap: 12px; align-items: flex-start; }
.ghost-wrap { border: 1px solid #2a3240; padding: 12px; margin-top: 12px; }

/* 响应式（当前为纵向布局，保持单列） */
@media (max-width: 640px) {
  .two-col { flex-direction: column; }
  .ghost-section { grid-template-columns: 1fr; }
  .inline { flex-direction: column; align-items: stretch; gap: 6px; }
  .quality-wrap { flex: 1 0 auto; }
  .roi-table th, .roi-table td { padding: 6px; font-size: 12px; }
}