:root {
  --navy: #061534;
  --navy-soft: #0b2453;
  --blue: #1769ff;
  --blue-soft: #edf5ff;
  --bg: #f3f6fb;
  --panel: #ffffff;
  --text: #172033;
  --muted: #667085;
  --line: #dce4ef;
  --warn: #a85c00;
  --warn-bg: #fff2df;
  --danger: #b42318;
  --success: #147344;
  --shadow: 0 10px 26px rgba(18, 35, 65, 0.08);
}

.ai-cover-entry { margin: 18px 0 10px; border: 1px solid #cfe0f5; border-radius: 10px; background: #f4f8fd; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ai-cover-entry b, .ai-cover-entry span { display: block; }
.ai-cover-entry b { color: #173c6d; font-size: 15px; }
.ai-cover-entry span { margin-top: 4px; color: #627188; font-size: 12px; line-height: 1.55; }
.ai-cover-result { margin-top: 10px; }
.ai-cover-result.loading { border: 1px dashed #b9cce5; border-radius: 10px; background: #f7faff; padding: 18px; color: #526b8c; }
.ai-cover-diagnosis { border: 1px solid #d6e2f0; border-radius: 12px; background: #fff; overflow: hidden; }
.ai-cover-diagnosis.ready { border-top: 4px solid #3f83cf; }
.ai-cover-diagnosis.partial { border-top: 4px solid #d7a13c; }
.ai-cover-current { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; padding: 18px; background: linear-gradient(135deg, #f5f9ff, #fff); }
.ai-cover-preview { width: 210px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #e9eff6; }
.ai-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-cover-placeholder { height: 100%; display: grid; place-items: center; color: #79879a; font-size: 13px; }
.ai-cover-kicker { color: #3479c9; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.ai-cover-current-copy h3 { margin: 6px 0 10px; color: #172d4c; font-size: 18px; line-height: 1.45; }
.ai-cover-current-copy p { margin: 0 0 9px; color: #43536a; }
.ai-cover-current-copy small { color: #7a8799; }
.ai-cover-feature-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; }
.ai-cover-feature-strip span { border-radius: 999px; background: #f1f5fa; padding: 5px 10px; color: #526176; font-size: 12px; }
.ai-cover-issues { display: grid; gap: 10px; padding: 16px 18px; }
.ai-cover-issue { border: 1px solid #e1e8f1; border-radius: 9px; padding: 13px 14px; }
.ai-cover-issue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #263b58; }
.ai-cover-issue p { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; margin: 7px 0; color: #4d5e74; line-height: 1.55; }
.ai-cover-issue p strong { color: #273d5c; font-size: 12px; }
.ai-cover-issue small { display: block; margin-top: 8px; color: #7a8799; line-height: 1.5; }
.ai-evidence-tag { border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 700; }
.ai-evidence-tag.research { background: #e8f5ec; color: #25723d; }
.ai-evidence-tag.structural { background: #eaf2fd; color: #2c68ad; }
.ai-evidence-tag.hypothesis { background: #fff2dc; color: #94600a; }
.ai-cover-uncertainty { margin: 0 18px 14px; border-left: 3px solid #d8a03f; background: #fff9ef; padding: 9px 11px; color: #76571d; font-size: 12px; line-height: 1.55; }
.ai-cover-next { display: flex; align-items: center; gap: 10px; border-top: 1px solid #e8edf4; padding: 13px 18px; }
.ai-cover-next button[disabled] { cursor: not-allowed; opacity: .55; }
.ai-cover-next span { color: #7c8797; font-size: 11px; }
.ai-cover-safe-error { display: grid; gap: 5px; border: 1px solid #efd7b1; border-radius: 9px; background: #fff9ef; padding: 14px; color: #76571d; }
.ai-cover-safe-error small { color: #8b7345; }
.ai-cover-generation-form { border-top: 1px solid #e8edf4; background: #f9fbfe; }
.ai-cover-generation-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 8px; }
.ai-cover-generation-head b, .ai-cover-generation-head span { display: block; }
.ai-cover-generation-head b { color: #203a60; }
.ai-cover-generation-head div > span { margin-top: 4px; color: #708097; font-size: 12px; }
.ai-cover-generation-controls { display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(110px, .5fr) minmax(160px, .7fr); gap: 12px; padding: 10px 18px 2px; }
.ai-cover-generation-controls .field { margin: 0; }
.ai-cover-generation-result { padding: 0 18px 18px; }
.ai-cover-generation-result.empty { color: #7b8798; font-size: 12px; }
.ai-cover-generation-state { display: grid; gap: 4px; border: 1px dashed #b7cbea; border-radius: 9px; background: #f2f7ff; padding: 13px; color: #416289; }
.ai-cover-generation-state span { font-size: 12px; }
.ai-cover-generation-summary { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #2a4262; }
.ai-cover-generation-summary span { color: #738096; font-size: 12px; }
.ai-cover-candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ai-cover-candidate { overflow: hidden; border: 1px solid #d7e1ed; border-radius: 11px; background: #fff; box-shadow: 0 5px 16px rgba(31, 58, 92, .06); }
.ai-cover-candidate.selected { border: 2px solid #2f7acb; }
.ai-cover-candidate > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e8eef6; }
.ai-cover-candidate-copy { display: grid; gap: 8px; padding: 12px; }
.ai-cover-candidate-copy div > b, .ai-cover-candidate-copy div > span { display: block; }
.ai-cover-candidate-copy div > span { margin-top: 3px; color: #718096; font-size: 11px; }
.ai-cover-candidate-copy p { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 6px; margin: 0; color: #43536a; font-size: 12px; }
.ai-cover-candidate-copy small { color: #7b8798; }
.ai-cover-generation-note { margin-top: 10px; border-left: 3px solid #d8a03f; padding: 7px 10px; color: #755b29; font-size: 11px; }

@media (max-width: 820px) {
  .ai-cover-entry { align-items: stretch; flex-direction: column; }
  .ai-cover-current { grid-template-columns: 1fr; }
  .ai-cover-preview { width: 100%; }
  .ai-cover-issue p { grid-template-columns: 1fr; }
  .ai-cover-next { align-items: flex-start; flex-direction: column; }
  .ai-cover-generation-head, .ai-cover-generation-summary { align-items: flex-start; flex-direction: column; }
  .ai-cover-generation-controls, .ai-cover-candidate-grid { grid-template-columns: 1fr; }
}

.traffic-analysis-state {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #dbe7f4;
  border-radius: 10px;
  background: #f7fbff;
  color: #52667d;
  font-size: 13px;
}

.traffic-research-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
}

.traffic-research-tabs button {
  flex: 0 0 auto;
  border: 1px solid #d5e1ef;
  border-radius: 999px;
  background: #fff;
  color: #42566d;
  padding: 9px 15px;
  cursor: pointer;
}

.traffic-research-tabs button.active {
  border-color: #255bd6;
  background: #255bd6;
  color: #fff;
}

.traffic-research-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.traffic-feature-card,
.traffic-change-card,
.traffic-rule-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #dce6f1;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(33, 64, 103, 0.05);
}

.traffic-feature-card > div,
.traffic-change-card > div,
.traffic-rule-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.traffic-feature-card strong { color: #e74f78; }
.traffic-feature-card p,
.traffic-change-card p,
.traffic-rule-card p,
.traffic-rule-card h3 { margin: 0; }
.traffic-feature-card small,
.traffic-change-card small,
.traffic-rule-card small { color: #71849a; line-height: 1.55; }
.traffic-rule-card h3 { font-size: 15px; line-height: 1.6; }
.traffic-rule-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.traffic-rule-evidence {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dce6f1;
  border-radius: 12px;
  background: #f8fbff;
}
.traffic-rule-evidence > div:not(.empty) { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e6edf5; }

.traffic-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.traffic-status-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dce6f1;
  border-radius: 12px;
  background: #f9fbfe;
}
.traffic-status-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.traffic-status-card h3 { margin: 0; font-size: 15px; }
.traffic-status-card > div:first-child > span { color: #71849a; font-size: 12px; }
.traffic-status-card dl { display: grid; gap: 7px; margin: 12px 0 0; }
.traffic-status-card dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.traffic-status-card dt { color: #71849a; }
.traffic-status-card dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.traffic-status-wide { grid-column: 1 / -1; }
.traffic-health-badge { padding: 3px 8px; border-radius: 999px; background: #eef2f7; }
.traffic-health-badge.status-normal { color: #147344; background: #e9f8f0; }
.traffic-health-badge.status-delayed { color: #a85c00; background: #fff2df; }
.traffic-health-badge.status-abnormal { color: #b42318; background: #fdecea; }
.traffic-readiness-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.traffic-readiness-item { padding: 10px; border-radius: 9px; background: #fff; border: 1px solid #e2eaf3; }
.traffic-readiness-item b, .traffic-readiness-item span { display: block; }
.traffic-readiness-item span { margin-top: 5px; color: #71849a; font-size: 12px; line-height: 1.45; }
.traffic-readiness-item.status-ready { border-color: #9fd6b8; }

.traffic-internal-pane { display: grid; gap: 16px; }
.traffic-internal-pane[hidden] { display: none; }
.traffic-internal-notice { margin-bottom: 14px; padding: 11px 13px; border-radius: 10px; background: #eef6ff; color: #3f5872; font-size: 13px; line-height: 1.6; }
.traffic-anchor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 12px; }
.traffic-anchor-card { display: grid; gap: 10px; padding: 14px; border: 1px solid #dce6f1; border-radius: 12px; background: #fff; }
.traffic-anchor-head { display: flex; justify-content: space-between; gap: 10px; }
.traffic-anchor-head h3, .traffic-anchor-card p { margin: 0; }
.traffic-anchor-head span, .traffic-anchor-card small { color: #71849a; }
.traffic-anchor-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: #eef2f7; }
.traffic-anchor-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.traffic-anchor-metrics div { padding: 8px; border-radius: 8px; background: #f7f9fc; }
.traffic-anchor-metrics span, .traffic-anchor-metrics b { display: block; }
.traffic-anchor-metrics span { color: #71849a; font-size: 11px; }
.traffic-anchor-metrics b { margin-top: 3px; }

.traffic-experiment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.traffic-form-wide { grid-column: 1 / -1; }
.traffic-form-actions { display: flex; align-items: center; gap: 12px; color: #71849a; font-size: 13px; }
.traffic-experiment-list { display: grid; gap: 10px; }
.traffic-experiment-card { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid #dce6f1; border-radius: 11px; }
.traffic-experiment-card h3, .traffic-experiment-card p { margin: 0; }
.traffic-experiment-card p, .traffic-experiment-card small { color: #71849a; }
.traffic-experiment-detail { margin-top: 14px; padding: 16px; border: 1px solid #b9cce3; border-radius: 12px; background: #f8fbff; }
.traffic-experiment-creative { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.traffic-experiment-creative article { padding: 12px; border-radius: 10px; background: #fff; border: 1px solid #e0e8f1; }
.traffic-experiment-creative img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #eef2f7; }
.traffic-evaluation-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13px; }
.traffic-evaluation-table th, .traffic-evaluation-table td { padding: 8px; border-bottom: 1px solid #dfe7f0; text-align: right; }
.traffic-evaluation-table th:first-child, .traffic-evaluation-table td:first-child { text-align: left; }
.traffic-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.traffic-vision-ab-pane { display: grid; gap: 16px; }
.traffic-vision-ab-pane[hidden] { display: none; }
.traffic-vision-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.traffic-vision-provider-card { min-width: 0; padding: 14px; border: 1px solid #dce6f1; border-radius: 12px; background: #f9fbfe; }
.traffic-vision-provider-card > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.traffic-vision-provider-card h3 { margin: 0; font-size: 15px; }
.traffic-vision-provider-card dl, .traffic-vision-metric-grid dl, .traffic-vision-review-compare dl { display: grid; gap: 7px; margin: 12px 0 0; }
.traffic-vision-provider-card dl div, .traffic-vision-metric-grid dl div, .traffic-vision-review-compare dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.traffic-vision-provider-card dt, .traffic-vision-metric-grid dt, .traffic-vision-review-compare dt { color: #71849a; }
.traffic-vision-provider-card dd, .traffic-vision-metric-grid dd, .traffic-vision-review-compare dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.traffic-vision-error-empty { margin-top: 12px; padding: 9px 10px; border-radius: 8px; background: #f2f8f4; color: #4e7560; font-size: 12px; }
.traffic-vision-error-box { display: grid; gap: 5px; margin-top: 12px; padding: 10px; border: 1px solid #f2c8c8; border-radius: 9px; background: #fff6f6; color: #8a3333; overflow-wrap: anywhere; }
.traffic-vision-error-box b { font-size: 12px; }
.traffic-vision-error-box span, .traffic-vision-error-box small { font-size: 11px; line-height: 1.45; }
.traffic-vision-batch-error { display: grid; gap: 5px; margin-bottom: 12px; padding: 11px 12px; border: 1px solid #efc67a; border-radius: 9px; background: #fff9ea; color: #81591d; font-size: 12px; overflow-wrap: anywhere; }
.traffic-vision-test-toolbar { display: flex; align-items: end; gap: 10px; margin-bottom: 14px; }
.traffic-vision-test-toolbar .field { min-width: min(460px, 100%); margin: 0; }
.traffic-vision-test-meta { display: grid; gap: 5px; margin-bottom: 12px; }
.traffic-vision-test-meta span, .traffic-vision-test-meta small { color: #71849a; }
.traffic-vision-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.traffic-vision-metric-grid article { padding: 14px; border: 1px solid #dce6f1; border-radius: 12px; background: #fff; }
.traffic-vision-metric-grid h3 { margin: 0; font-size: 15px; }
.traffic-vision-review-summary { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 10px; background: #f3f8ff; }
.traffic-vision-review-rates { display: flex; flex-wrap: wrap; gap: 8px; }
.traffic-vision-review-rates span { padding: 5px 9px; border-radius: 999px; background: #fff; color: #315b97; font-size: 12px; }
.traffic-vision-review-list { display: grid; gap: 14px; }
.traffic-vision-review-card { overflow: hidden; border: 1px solid #dce6f1; border-radius: 13px; background: #fff; }
.traffic-vision-review-card > header { display: flex; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #e6edf5; background: #f9fbfe; }
.traffic-vision-review-card h3, .traffic-vision-review-card p, .traffic-vision-review-card h4 { margin: 0; }
.traffic-vision-review-card header p { margin-top: 4px; color: #71849a; font-size: 12px; }
.traffic-vision-review-card code { color: #52667d; }
.traffic-vision-review-compare { display: grid; grid-template-columns: minmax(220px, .8fr) repeat(2, minmax(260px, 1fr)); }
.traffic-vision-review-compare > * { min-width: 0; margin: 0; padding: 14px; border-right: 1px solid #e6edf5; }
.traffic-vision-review-compare > *:last-child { border-right: 0; }
.traffic-vision-review-compare figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: #eef2f7; }
.traffic-vision-review-compare figcaption { margin-top: 8px; color: #71849a; text-align: center; font-size: 12px; }
.traffic-vision-analysis-head { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #52667d; font-size: 11px; }
.traffic-vision-review-card > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid #e6edf5; }
.traffic-vision-review-card > footer em { margin-left: auto; color: #71849a; font-size: 12px; font-style: normal; }
.traffic-vision-review-card button.active { border-color: #255bd6; background: #255bd6; color: #fff; }

.traffic-cover-source-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 13px; padding: 10px 12px; border-radius: 9px; background: #f2f7ff; color: #3d5d83; font-size: 12px; }
.traffic-cover-source-summary span { padding: 4px 7px; border-radius: 999px; background: #fff; }
.traffic-cover-source-summary small { margin-left: auto; color: #71849a; }
.internal-sync-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.internal-sync-strip span { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 9px; background: #f4f7fb; min-width: 0; }
.internal-sync-strip b { color: #718096; font-size: 11px; font-weight: 600; }
.internal-sync-strip strong { color: #243b53; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traffic-vision-production-pane { display: grid; gap: 16px; }
.traffic-vision-production-pane[hidden] { display: none; }
.traffic-vision-production-models, .traffic-vision-production-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.traffic-vision-production-models article, .traffic-vision-production-counts article { min-width: 0; padding: 12px; border: 1px solid #dce6f1; border-radius: 10px; background: #f9fbfe; }
.traffic-vision-production-models span, .traffic-vision-production-models strong, .traffic-vision-production-models small, .traffic-vision-production-counts span, .traffic-vision-production-counts strong { display: block; }
.traffic-vision-production-models span, .traffic-vision-production-counts span { color: #71849a; font-size: 11px; }
.traffic-vision-production-models strong, .traffic-vision-production-counts strong { margin-top: 5px; color: #19324e; font-size: 17px; overflow-wrap: anywhere; }
.traffic-vision-production-models small { margin-top: 4px; color: #71849a; line-height: 1.45; }
.traffic-vision-production-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 13px; color: #71849a; font-size: 12px; }
.traffic-vision-production-metrics { display: grid; gap: 12px; }
.traffic-vision-production-counts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.traffic-vision-production-costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.traffic-vision-production-costs article { display: grid; gap: 5px; padding: 12px; border-left: 3px solid #6f9dde; background: #f7faff; color: #52667d; font-size: 12px; }
.traffic-vision-production-review-list { display: grid; gap: 13px; }
.traffic-vision-production-review-card { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 2fr); overflow: hidden; border: 1px solid #dce6f1; border-radius: 12px; }
.traffic-vision-production-review-card > img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; background: #edf2f7; }
.traffic-vision-production-review-body { min-width: 0; padding: 14px; }
.traffic-vision-production-review-body > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.traffic-vision-production-review-body p { margin: 7px 0 0; color: #61748a; font-size: 12px; }
.traffic-vision-production-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.traffic-vision-production-analysis { padding: 10px; border-radius: 9px; background: #f7f9fc; }
.traffic-vision-production-analysis dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 8px 0 0; }
.traffic-vision-production-analysis dl div { display: grid; grid-template-columns: minmax(95px, 135px) minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px dashed #dce6f1; font-size: 11px; }
.traffic-vision-production-analysis dt { color: #71849a; }
.traffic-vision-production-analysis dt::after, .traffic-vision-quality-analysis dt::after { content: "："; }
.traffic-vision-production-analysis dd { margin: 0; overflow-wrap: anywhere; }
.traffic-vision-production-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.traffic-vision-production-recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.traffic-vision-production-recent article { overflow: hidden; border: 1px solid #dce6f1; border-radius: 10px; background: #fff; }
.traffic-vision-production-recent img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eef2f7; }
.traffic-vision-production-recent article > div { display: grid; gap: 4px; padding: 10px; }
.traffic-vision-production-recent span, .traffic-vision-production-recent small { color: #71849a; font-size: 11px; }
.traffic-vision-production-recent button { margin-top: 5px; }

.traffic-vision-quality-pane { display: grid; gap: 16px; }
.traffic-vision-quality-pane[hidden] { display: none; }
.traffic-vision-quality-create { display: grid; grid-template-columns: minmax(280px, 2fr) 120px 150px auto; align-items: end; gap: 10px; margin-top: 14px; }
.traffic-vision-quality-create > span { grid-column: 1 / -1; color: #61748a; font-size: 12px; }
.traffic-vision-quality-audits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.traffic-vision-quality-audit-card { padding: 13px; border: 1px solid #dce6f1; border-radius: 11px; background: #f9fbfe; }
.traffic-vision-quality-audit-card > div { display: flex; justify-content: space-between; gap: 10px; }
.traffic-vision-quality-audit-card p { margin: 7px 0; color: #61748a; font-size: 12px; overflow-wrap: anywhere; }
.traffic-vision-quality-progress { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; }
.traffic-vision-quality-progress article { padding: 11px; border: 1px solid #dce6f1; border-radius: 9px; background: #f8fbff; }
.traffic-vision-quality-progress span, .traffic-vision-quality-progress strong { display: block; }
.traffic-vision-quality-progress span { color: #71849a; font-size: 11px; }
.traffic-vision-quality-progress strong { margin-top: 4px; color: #19324e; font-size: 16px; }
.traffic-vision-quality-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.traffic-vision-quality-summary article { padding: 12px; border-left: 3px solid #6f9dde; background: #f7faff; }
.traffic-vision-quality-summary h3 { margin: 0 0 8px; }
.traffic-vision-quality-summary p, .traffic-vision-quality-summary li { margin: 5px 0; color: #52667d; font-size: 12px; }
.traffic-vision-quality-summary ol { margin: 0; padding-left: 20px; }
.traffic-vision-quality-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.traffic-vision-quality-list[hidden], .traffic-vision-quality-detail[hidden] { display: none; }
.traffic-vision-quality-item { position: relative; display: grid; grid-template-columns: 1fr; gap: 4px; padding: 0 0 10px; overflow: hidden; border: 1px solid #dce6f1; border-radius: 10px; background: #fff; color: #19324e; text-align: left; }
.traffic-vision-quality-item:hover { border-color: #7fa8e6; box-shadow: 0 5px 14px rgba(48, 92, 150, .12); }
.traffic-vision-quality-item.reviewed { border-color: #89c9a5; }
.traffic-vision-quality-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #edf2f7; }
.traffic-vision-quality-item > span { position: absolute; top: 7px; left: 7px; padding: 3px 6px; border-radius: 999px; background: rgba(12, 31, 55, .78); color: #fff; font-size: 10px; }
.traffic-vision-quality-item strong, .traffic-vision-quality-item small, .traffic-vision-quality-item em { margin: 0 9px; }
.traffic-vision-quality-item small { min-height: 30px; color: #71849a; font-size: 10px; line-height: 1.45; }
.traffic-vision-quality-item em { color: #2c73ca; font-size: 11px; font-style: normal; }
.traffic-vision-quality-nav { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.traffic-vision-quality-nav span { margin-left: auto; color: #61748a; font-size: 12px; }
.traffic-vision-quality-inspect { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.7fr); gap: 14px; }
.traffic-vision-quality-cover img { width: 100%; max-height: 620px; object-fit: contain; border-radius: 11px; background: #101a28; }
.traffic-vision-quality-cover p { margin: 7px 0; color: #52667d; font-size: 12px; }
.traffic-vision-quality-results { display: grid; gap: 10px; }
.traffic-vision-quality-analysis { min-width: 0; padding: 12px; border: 1px solid #dce6f1; border-radius: 10px; background: #f9fbfe; }
.traffic-vision-quality-analysis h3 { margin: 0 0 8px; }
.traffic-vision-quality-analysis dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.traffic-vision-quality-analysis dl div { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed #dce6f1; font-size: 12px; }
.traffic-vision-quality-analysis dt { color: #71849a; }
.traffic-vision-quality-analysis dd { margin: 0; overflow-wrap: anywhere; }
.traffic-vision-quality-analysis details { margin-top: 9px; color: #52667d; font-size: 11px; }
.traffic-vision-quality-analysis pre { max-height: 260px; overflow: auto; padding: 9px; border-radius: 8px; background: #142239; color: #dce8f7; white-space: pre-wrap; word-break: break-word; }
.traffic-quality-warning { padding: 10px; border-radius: 8px; background: #fff3e2; color: #9b5d12; line-height: 1.6; }
.traffic-vision-quality-form { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid #dce6f1; border-radius: 11px; background: #fff; }
.traffic-vision-quality-form fieldset { display: flex; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; }
.traffic-vision-quality-form legend { width: 100%; margin-bottom: 5px; font-weight: 700; }
.traffic-vision-quality-form fieldset label, .traffic-vision-quality-severe, .traffic-vision-quality-issues label { display: flex; align-items: center; gap: 5px; color: #40566f; font-size: 12px; }
.traffic-vision-quality-issues { display: flex; flex-wrap: wrap; gap: 9px 14px; }
.quality-auto-save-state { margin: 0; color: #39765a; font-size: 12px; }

@media (max-width: 760px) {
  .internal-sync-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traffic-research-results { grid-template-columns: 1fr; }
  .traffic-feature-card > div, .traffic-change-card > div, .traffic-rule-card > div:first-child { flex-direction: column; }
  .traffic-status-grid, .traffic-experiment-form { grid-template-columns: 1fr; }
  .traffic-readiness-summary { grid-template-columns: 1fr; }
  .traffic-form-wide { grid-column: auto; }
  .traffic-experiment-card { grid-template-columns: 1fr; }
  .traffic-experiment-creative { grid-template-columns: 1fr; }
  .traffic-vision-provider-grid, .traffic-vision-metric-grid, .traffic-vision-review-compare { grid-template-columns: 1fr; }
  .traffic-vision-test-toolbar { align-items: stretch; flex-direction: column; }
  .traffic-vision-review-compare > * { border-right: 0; border-bottom: 1px solid #e6edf5; }
  .traffic-vision-production-models, .traffic-vision-production-counts, .traffic-vision-production-costs, .traffic-vision-production-review-card, .traffic-vision-production-compare { grid-template-columns: 1fr; }
  .traffic-vision-quality-create, .traffic-vision-quality-progress, .traffic-vision-quality-summary, .traffic-vision-quality-inspect { grid-template-columns: 1fr; }
  .traffic-cover-source-summary small { width: 100%; margin-left: 0; }
}

/* 直播流量研究中心：全部样式使用 traffic- 前缀，避免影响现有业务页面。 */
.traffic-metric-notice {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #f0c36a;
  border-radius: 10px;
  background: #fff9e8;
  color: #7a5510;
  font-size: 13px;
  line-height: 1.6;
}

.traffic-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.traffic-summary-grid > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line, #e8e9ef);
  border-radius: 12px;
  background: #fff;
}

.traffic-summary-grid span,
.traffic-card-body dt,
.traffic-backfill-row span {
  color: var(--muted, #767b8c);
  font-size: 12px;
}

.traffic-summary-grid strong {
  font-size: 22px;
  color: var(--ink, #202333);
}

.traffic-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1.4fr auto auto;
  gap: 12px;
  align-items: end;
}

.traffic-filter-grid .field {
  margin: 0;
}

.traffic-backfill-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.traffic-backfill-row input,
.traffic-backfill-row select {
  width: auto;
  min-width: 150px;
}

.traffic-sample-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.traffic-sample-card {
  overflow: hidden;
  border: 1px solid var(--line, #e8e9ef);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(28, 33, 52, 0.05);
}

.traffic-cover-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #edf0f7;
}

.traffic-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.traffic-cover-empty,
.traffic-history-cover-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #8b90a0;
  background: linear-gradient(135deg, #f4f5f9, #e7eaf2);
}

.traffic-heat-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(28, 31, 45, 0.8);
  font-size: 12px;
}

.traffic-card-body {
  padding: 14px;
}

.traffic-card-head,
.traffic-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.traffic-card-head h3 {
  margin: 0;
  font-size: 16px;
}

.traffic-card-head strong,
.traffic-history-head strong {
  color: #e55b7e;
  white-space: nowrap;
}

.traffic-card-title {
  min-height: 42px;
  margin: 10px 0;
  color: #373b4c;
  line-height: 1.5;
}

.traffic-card-tags,
.traffic-change-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.traffic-card-tags span,
.traffic-change-tags span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f2f7;
  color: #565c70;
  font-size: 11px;
}

.traffic-card-body dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 12px 0;
}

.traffic-card-body dl > div {
  min-width: 0;
}

.traffic-card-body dt,
.traffic-card-body dd {
  margin: 0;
}

.traffic-card-body dd {
  overflow: hidden;
  margin-top: 3px;
  color: #313547;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-card-actions,
.traffic-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.traffic-pagination {
  justify-content: center;
  margin-top: 18px;
}

.traffic-history-list {
  display: grid;
  gap: 10px;
}

.traffic-history-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line, #e8e9ef);
  border-radius: 12px;
  background: #fff;
}

.traffic-history-item img,
.traffic-history-cover-empty {
  width: 150px;
  height: 92px;
  border-radius: 8px;
  object-fit: cover;
}

.traffic-history-item p {
  margin: 8px 0;
}

.traffic-run-list {
  display: grid;
  gap: 8px;
}

.traffic-run-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e8e9ef);
  border-left: 4px solid #aeb4c3;
  border-radius: 10px;
  background: #fff;
}

.traffic-run-item.status-success { border-left-color: #3aaa78; }
.traffic-run-item.status-partial { border-left-color: #e5a52f; }
.traffic-run-item.status-error { border-left-color: #d95368; }

.traffic-run-item > div {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.traffic-run-item p {
  grid-column: 1 / -1;
  margin: 0;
  color: #b33b50;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .traffic-sample-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traffic-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .traffic-summary-grid,
  .traffic-sample-grid,
  .traffic-filter-grid { grid-template-columns: 1fr; }
  .traffic-history-item { grid-template-columns: 1fr; }
  .traffic-history-item img,
  .traffic-history-cover-empty { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .traffic-run-item { grid-template-columns: 1fr; }
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

h1, h2, h3, h4, p { margin: 0; }
button, input, textarea, select { font: inherit; }

.app-shell { min-height: 100vh; display: flex; }

.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex: 0 0 288px;
  flex-direction: column;
  width: 288px;
  height: 100vh;
  overflow-y: auto;
  background: var(--navy);
  color: #f6f9ff;
}

.brand { display: grid; gap: 6px; min-height: 124px; padding: 29px 26px 24px; border-bottom: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(21,59,116,.36), transparent); }
.brand strong { color: #49b8ff; font-size: 23px; line-height: 1.2; }
.brand span { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.35; }

.main-nav { display: grid; gap: 5px; padding: 18px 14px 20px; }
.nav-label { margin: 16px 10px 4px; color: #90abd8; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.nav-label:first-child { margin-top: 2px; }
.nav-item { width: 100%; min-height: 44px; padding: 0 15px; border: 0; border-radius: 6px; background: transparent; color: #dce7f8; cursor: pointer; text-align: left; }
.nav-item:hover { background: rgba(255,255,255,.08); }
.nav-item.active { box-shadow: inset 3px 0 0 #8dcbff; background: #1769ff; color: #fff; font-weight: 700; }

.account-box { display: grid; gap: 9px; margin: auto 14px 16px; padding: 15px; border: 1px solid rgba(178,202,244,.22); border-radius: 8px; background: rgba(255,255,255,.06); }
.account-label { color: #cbd9f0; font-size: 12px; font-weight: 700; }
.account-box input { width: 100%; min-height: 36px; border: 1px solid rgba(190,210,244,.32); border-radius: 5px; outline: none; background: rgba(0,0,0,.14); color: #fff; padding: 0 10px; font-size: 13px; }
.account-box input::placeholder { color: #9fb0cf; }
.account-box input:focus { border-color: #5da6ff; box-shadow: 0 0 0 3px rgba(93,166,255,.15); }
.permission-note { color: #bcd1f4; font-size: 12px; line-height: 1.55; }

.workspace { min-width: 0; flex: 1; padding: 0 28px 36px; }
.workspace-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding: 28px 2px 22px; }
.eyebrow { color: #4e75ae; font-size: 13px; font-weight: 700; }
h1 { margin-top: 5px; font-size: 28px; letter-spacing: 0; }
.workspace-header > div > p:last-child { max-width: 720px; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.status-pill { flex: 0 0 auto; border: 1px solid #b7d6ff; border-radius: 999px; background: var(--blue-soft); color: #0b5bd3; padding: 8px 13px; font-size: 13px; }

.view { display: none; }
.view.active { display: block; }

.panel { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); padding: 20px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.panel-title h2 { font-size: 18px; }
.panel-title span, .panel-title > div > span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric { min-height: 108px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); padding: 17px; }
.metric.warn { border-color: #ffd39a; background: var(--warn-bg); }
.metric span { display: block; color: var(--muted); font-size: 13px; }
.metric strong { display: block; overflow: hidden; margin-top: 10px; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }

.data-grid { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(310px, .7fr); gap: 14px; align-items: start; }
.revenue-monitor-panel { margin-bottom: 14px; padding: 16px; }
.revenue-monitor-title .actions { margin: 0; }
.revenue-department-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.revenue-period-card { border: 1px solid #dce5ef; border-left: 4px solid #2d9b71; border-radius: 8px; background: #fbfdff; padding: 13px 15px; }
.revenue-period-card.behind { border-left-color: #d75a55; }
.revenue-period-card.unconfigured { border-left-color: #9aa9bb; }
.revenue-period-card > div { display: flex; justify-content: space-between; gap: 12px; }
.revenue-period-card > div span, .revenue-period-card dt { color: var(--muted); font-size: 12px; }
.revenue-period-card > div b { font-size: 18px; }
.revenue-period-card dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 11px 0 0; }
.revenue-period-card dl div { border-top: 1px solid #e5ebf3; padding-top: 7px; }
.revenue-period-card dd { margin: 3px 0 0; font-weight: 700; font-size: 13px; }
.revenue-operator-table { overflow-x: auto; margin-top: 12px; }
.revenue-operator-table table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12px; }
.revenue-operator-table th, .revenue-operator-table td { border-bottom: 1px solid #e7edf4; padding: 8px 9px; text-align: left; white-space: nowrap; vertical-align: middle; }
.revenue-operator-table th { color: var(--muted); font-weight: 650; }
.revenue-operator-table td:first-child > small { display: block; margin-top: 3px; color: var(--muted); }
.revenue-operator-metric { display: grid; gap: 3px; min-width: 128px; }
.revenue-operator-metric small { color: var(--muted); }
.revenue-progress { width: 100%; height: 4px; overflow: hidden; border-radius: 999px; background: #e4eaf2; }
.revenue-period-card > .revenue-progress { margin-top: 10px; }
.revenue-progress i { display: block; height: 100%; border-radius: inherit; background: #4b83d5; }
.revenue-progress.done i, .revenue-progress.ahead i { background: #2d9b71; }
.revenue-progress.behind i { background: #d75a55; }
.revenue-progress.muted i { width: 0; }
.revenue-positive, .revenue-change.up { color: #187451; }
.revenue-negative, .revenue-change.down { color: #b73c38; }
.revenue-change.flat, .revenue-change.muted { color: var(--muted); }
.revenue-neutral { color: var(--muted); }
.revenue-hours-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; border-top: 1px dashed #d9e3ef; padding-top: 8px; }
.revenue-hours-summary b { color: #294c77; font-size: 13px; }
.revenue-hours-summary small { color: var(--muted); font-size: 12px; text-align: right; }
.revenue-hours-summary.compact { display: grid; gap: 2px; margin-top: 5px; padding-top: 5px; }
.revenue-hours-summary.compact b { font-size: 12px; }
.revenue-hours-summary.compact small { text-align: left; white-space: normal; }
.revenue-detail-toggle { min-height: 28px; margin-top: 6px; padding: 0 9px; font-size: 12px; }
.revenue-streamer-detail-row[hidden] { display: none; }
.revenue-streamer-detail-row > td { background: #f7faff; padding: 12px 14px !important; white-space: normal !important; }
.revenue-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.revenue-detail-tabs, .revenue-detail-sort { display: flex; align-items: center; gap: 7px; }
.revenue-detail-tabs button, .revenue-detail-sort button { min-width: 66px; min-height: 32px; }
.revenue-detail-tabs button.active { border-color: #8bb8f7; background: #eaf3ff; color: #0b5bd3; }
.revenue-detail-sort label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.revenue-detail-sort select { min-height: 32px; border: 1px solid #cfd9e8; border-radius: 6px; background: #fff; padding: 0 8px; }
.revenue-detail-meta { margin: 9px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.revenue-streamer-table { overflow-x: auto; border: 1px solid #dce6f1; border-radius: 8px; background: #fff; }
.revenue-streamer-table table { width: 100%; min-width: 960px; table-layout: fixed; border-collapse: collapse; }
.revenue-streamer-table th, .revenue-streamer-table td { border-bottom: 1px solid #edf1f6; padding: 8px; text-align: left; vertical-align: middle; white-space: normal; }
.revenue-streamer-table th { background: #f3f7fc; color: #475467; font-weight: 650; }
.revenue-streamer-table td b, .revenue-streamer-table td small { display: block; }
.revenue-streamer-table td small { margin-top: 2px; color: var(--muted); }
.revenue-correlation { display: inline-flex; min-height: 24px; align-items: center; border-radius: 999px; background: #edf2f7; color: #526176; padding: 0 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.revenue-correlation.positive { background: #eaf7ef; color: #187451; }
.revenue-correlation.negative { background: #fff0ef; color: #b73c38; }
.revenue-correlation.warning { background: #fff4e6; color: #9a5a09; }
.revenue-detail-empty { min-height: 84px; margin-top: 9px; }
.revenue-target-modal { width: min(760px, 100%); }
.revenue-target-department { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.revenue-target-operators { max-height: 42vh; overflow-y: auto; border-top: 1px solid #e5ebf3; margin-top: 8px; }
.revenue-target-row { display: grid; grid-template-columns: minmax(120px, 1fr) 1fr 1fr; align-items: end; gap: 10px; border-bottom: 1px solid #edf1f6; padding: 10px 2px; }
.revenue-target-row label { color: var(--muted); font-size: 12px; }
.revenue-target-row input { margin-top: 4px; }
.data-maintenance-panel { margin-bottom: 14px; padding: 16px; }
.data-maintenance-panel .panel-title { margin-bottom: 10px; }
.data-maintenance-panel .field { margin-bottom: 9px; }
.data-maintenance-panel .dropzone { min-height: 104px; gap: 5px; padding: 11px 14px; }
.data-maintenance-panel .dropzone strong { font-size: 14px; }
.data-maintenance-panel .dropzone small { font-size: 12px; line-height: 1.4; }
.data-maintenance-panel .progress-wrap { margin-top: 10px; }
.data-maintenance-panel .actions { margin-top: 10px; }
.field { display: grid; gap: 7px; margin-bottom: 13px; color: var(--muted); font-size: 13px; }
.field input, .field select, .field textarea, .inline-form input, .knowledge-search input, .board-controls select { width: 100%; min-height: 40px; border: 1px solid #cfd9e8; border-radius: 6px; background: #fff; color: var(--text); outline: none; padding: 0 11px; }
.field textarea { min-height: 94px; padding: 10px 11px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus, .inline-form input:focus, .knowledge-search input:focus, .board-controls select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,255,.12); }

button, .download, .button-link { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer; padding: 0 14px; text-decoration: none; font-size: 14px; }
.primary { background: var(--blue); color: #fff; }
.primary:hover { background: #0d55d7; }
.primary:disabled, button:disabled { cursor: not-allowed; opacity: .55; }
.secondary { border: 1px solid #d4dfef; background: #f6f8fc; color: #344054; }
.secondary:hover { background: #edf2f8; }
.danger { border: 1px solid #ffd0cd; background: #fff1f0; color: var(--danger); }
.download { background: var(--blue); color: #fff; }
.download.disabled { pointer-events: none; background: #aebfd9; }
.compact { width: auto; min-width: 122px; }
.actions, .task-actions, .case-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.dropzone { display: grid; min-height: 168px; place-items: center; gap: 9px; border: 1px dashed #90b5f3; border-radius: 8px; background: #f7faff; cursor: pointer; padding: 20px; text-align: center; }
.dropzone:hover, .dropzone.dragging { border-color: var(--blue); background: #edf5ff; box-shadow: inset 0 0 0 2px rgba(23,105,255,.1); }
.dropzone.disabled { cursor: not-allowed; opacity: .55; }
.dropzone input { display: none; }
.dropzone strong { color: #174ea6; font-size: 16px; }
.dropzone small { max-width: 420px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.compact-dropzone { min-height: 138px; }
.roster-summary { display: grid; gap: 4px; min-height: 82px; margin-bottom: 13px; border-left: 3px solid #74a7ff; background: #f6f9ff; color: #36577f; padding: 12px; font-size: 13px; line-height: 1.5; }
.roster-summary b { color: #173f75; }
.roster-summary small, .helper-text { color: var(--muted); font-size: 12px; }
.helper-text { margin-top: 14px; line-height: 1.55; }

.progress-wrap { margin-top: 17px; }
.progress-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.progress { height: 9px; overflow: hidden; border-radius: 999px; background: #e6ecf5; }
.progress div { width: 0; height: 100%; background: var(--blue); transition: width .2s ease; }

.warning-summary { display: grid; gap: 10px; }
.empty { display: grid; min-height: 128px; place-items: center; border: 1px solid #e1e8f2; border-radius: 8px; background: #fbfcff; color: var(--muted); padding: 22px; text-align: center; }
.warning-item { border: 1px solid #e0e8f2; border-radius: 8px; background: #fbfcff; padding: 13px 14px; }
.warning-item strong { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.warning-item strong span { color: var(--muted); font-weight: 400; }
.warning-item p, .warning-item small { display: block; margin-top: 7px; color: #475467; font-size: 13px; line-height: 1.6; }
.text-action { min-height: 30px; margin-top: 9px; border: 1px solid #b8d4ff; background: transparent; color: #0b5bd3; padding: 0 9px; font-size: 13px; }
.text-action:hover { background: var(--blue-soft); }
.text-action.danger-soft { margin-left: 8px; border-color: #ffc9c9; color: #b42318; }
.text-action.danger-soft:hover { background: #fff1f1; }
.secondary.danger-soft { border-color: #ffc9c9; color: #b42318; }
.secondary.danger-soft:hover { background: #fff1f1; }

.workbench-command-panel { padding-bottom: 18px; }
.workbench-search { display: grid; grid-template-columns: minmax(180px, 260px) auto auto auto; gap: 9px; align-items: center; }
.workbench-search input { width: 100%; min-height: 40px; border: 1px solid #cfd9e8; border-radius: 6px; background: #fff; color: var(--text); outline: none; padding: 0 11px; }
.workbench-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,255,.12); }
.workbench-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.summary-card { border: 1px solid #d9e4f1; border-radius: 8px; background: #fbfdff; padding: 16px; }
.summary-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 13px; }
.summary-card-head h3 { font-size: 16px; }
.summary-card-head span { color: #4e75ae; font-size: 13px; font-weight: 700; }
.summary-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.summary-metrics div { min-width: 0; border-left: 3px solid #d8e5f7; background: #fff; padding: 9px 10px; }
.summary-metrics span { display: block; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.summary-metrics strong { display: block; overflow: hidden; margin-top: 5px; color: #172033; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.summary-metrics strong small { display: block; margin-top: 2px; color: #667085; font-size: 11px; font-weight: 400; white-space: normal; }
.target-rate { display: inline-block; }
.target-green { color: var(--success); }
.target-orange { color: #b65b13; }
.target-red { color: #b42318; }
.target-muted { color: var(--muted); }
.insight-list { display: grid; gap: 10px; }
.insight-list article { border-left: 3px solid #74a7ff; border-radius: 6px; background: #f6f9ff; color: #315072; padding: 11px 13px; font-size: 14px; line-height: 1.6; }
.operator-stat-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.operator-stat-strip span { border: 1px solid #dce7f4; border-radius: 999px; background: #f7faff; color: #43566f; padding: 6px 10px; font-size: 13px; }
.operator-stat-strip b { color: #174ea6; }
.recommendation-list { display: grid; gap: 12px; }
.recommendation-card { border: 1px solid #dce7f4; border-radius: 8px; background: #fff; padding: 15px; box-shadow: 0 8px 20px rgba(18,35,65,.05); }
.recommendation-card.severity-red { border-color: #ffc9c9; box-shadow: inset 4px 0 0 #d92d20, 0 8px 20px rgba(18,35,65,.05); }
.recommendation-card.severity-orange { border-color: #ffd7b5; box-shadow: inset 4px 0 0 #f79009, 0 8px 20px rgba(18,35,65,.05); }
.recommendation-card.severity-blue { box-shadow: inset 4px 0 0 #2e90fa, 0 8px 20px rgba(18,35,65,.05); }
.recommendation-card.severity-green { box-shadow: inset 4px 0 0 #12b76a, 0 8px 20px rgba(18,35,65,.05); }
.recommendation-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.recommendation-head h3 { font-size: 16px; }
.recommendation-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.recommendation-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.recommendation-tags span { border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.task-exists { display: inline-flex !important; margin-left: 6px; border-radius: 999px; background: #fff7e6; color: #b65b13 !important; padding: 2px 7px; font-size: 12px !important; font-weight: 700; vertical-align: middle; }
.recommendation-reasons { margin-top: 9px; color: #315b97; font-size: 13px; line-height: 1.55; }
.recommendation-trend { display: grid; gap: 3px; margin-top: 9px; border: 1px solid #dce7f4; border-radius: 7px; background: #fbfdff; padding: 8px 10px; color: #475467; font-size: 12px; line-height: 1.5; }
.recommendation-trend b { color: #24344c; font-size: 13px; }
.recommendation-problem { display: grid; gap: 5px; margin-top: 10px; color: #475467; font-size: 13px; line-height: 1.55; }
.recommendation-problem b, .recommendation-action b { color: #24344c; }
.recommendation-action { margin-top: 10px; border: 1px solid #dce7f4; border-radius: 7px; background: #fbfdff; color: #315072; padding: 10px 12px; font-size: 13px; line-height: 1.6; }
.recommendation-buttons { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }

.operator-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 180px auto; gap: 10px; margin-bottom: 14px; }
.operator-toolbar input, .operator-toolbar select { width: 100%; min-height: 40px; border: 1px solid #cfd9e8; border-radius: 6px; background: #fff; color: var(--text); outline: none; padding: 0 11px; }
.operator-board { display: grid; gap: 14px; }
.operator-card { border: 1px solid #dfe7f1; border-radius: 8px; background: #fff; padding: 16px; }
.operator-card.status-red { border-color: #ffc9c9; box-shadow: inset 4px 0 0 #d92d20; }
.operator-card.status-orange { border-color: #ffd39a; box-shadow: inset 4px 0 0 #f79009; }
.operator-card.status-green { border-color: #ccebd8; box-shadow: inset 4px 0 0 #12b76a; }
.operator-card-head, .operator-period-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.operator-card-head h3 { font-size: 17px; }
.operator-card-head span, .operator-period-head span, .operator-metric span, .operator-metric small, .operator-target-note { color: var(--muted); font-size: 12px; line-height: 1.45; }
.operator-status { flex: 0 0 auto; border-radius: 999px; padding: 5px 9px; font-size: 12px; }
.operator-status.tone-green { background: #ecfdf3; color: #087443; }
.operator-status.tone-orange { background: #fff7e8; color: #a85c00; }
.operator-status.tone-red { background: #fff1f0; color: #b42318; }
.operator-period-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.operator-period { border: 1px solid #e0e8f2; border-radius: 8px; background: #fbfcff; padding: 13px; }
.operator-period.tone-green { background: #f6fef9; border-color: #ccebd8; }
.operator-period.tone-orange { background: #fffaf2; border-color: #ffd39a; }
.operator-period.tone-red { background: #fff7f6; border-color: #ffc9c9; }
.operator-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.operator-metric { min-height: 78px; border: 1px solid #e3eaf3; border-radius: 7px; background: #fff; padding: 9px; }
.operator-metric b { display: block; margin: 5px 0 3px; color: #24344c; font-size: 14px; }
.operator-metric.tone-green b { color: var(--success); }
.operator-metric.tone-orange b { color: var(--warn); }
.operator-metric.tone-red b { color: var(--danger); }
.operator-target-note { margin-top: 10px; border-top: 1px dashed #d9e3ef; padding-top: 8px; }
.operator-stat-grid { display: grid; grid-template-columns: repeat(9, minmax(86px, 1fr)); gap: 8px; margin-top: 12px; }
.operator-stat-grid div { border: 1px solid #e5ecf5; border-radius: 7px; background: #fbfcff; padding: 9px; }
.operator-stat-grid span { display: block; color: var(--muted); font-size: 12px; }
.operator-stat-grid b { display: block; margin-top: 5px; color: #24344c; font-size: 16px; }
.operator-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.operator-detail { display: none; margin-top: 12px; }
.operator-card.expanded .operator-detail { display: block; }
.operator-anchor-table { overflow-x: auto; border: 1px solid #e0e8f2; border-radius: 8px; }
.operator-anchor-table table { width: 100%; min-width: 900px; border-collapse: collapse; background: #fff; }
.operator-anchor-table th, .operator-anchor-table td { border-bottom: 1px solid #edf1f7; padding: 10px; text-align: left; vertical-align: top; font-size: 13px; }
.operator-anchor-table th { background: #f6f8fc; color: #475467; font-weight: 700; }
.operator-anchor-table td small { display: block; margin-top: 3px; color: var(--muted); }
.operator-anchor-table td:last-child { display: flex; flex-wrap: wrap; gap: 6px; min-width: 150px; }

.timeline-list, .report-list, .task-list, .knowledge-list { display: grid; gap: 10px; }
.timeline-item, .report-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #e0e8f2; border-radius: 8px; background: #fbfcff; padding: 12px 14px; }
.timeline-item span, .report-item span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.timeline-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.timeline-actions button { min-height: 34px; padding: 0 11px; font-size: 13px; }
.day-detail { margin-top: 12px; border: 1px solid #e0e8f2; border-radius: 8px; background: #fbfcff; padding: 14px; }
.day-detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.day-detail-head strong { font-size: 15px; }
.day-detail-head span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.day-detail-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.day-detail-stats span { margin: 0; border: 1px solid #dbe7f6; border-radius: 999px; background: #f4f8ff; color: #36577f; padding: 4px 8px; }
.day-preview-table { overflow-x: auto; }
.day-preview-table table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12px; }
.day-preview-table th, .day-preview-table td { border-top: 1px solid #e7edf5; padding: 8px 9px; text-align: left; vertical-align: top; }
.day-preview-table th { color: #476482; font-weight: 700; background: #f3f7fc; }
.day-preview-table td:last-child { max-width: 260px; }

.board-title { align-items: flex-start; }
.board-title > div:first-child { flex: 0 0 132px; min-width: 132px; }
.board-title > div:first-child h2 { white-space: nowrap; }
.board-controls { display: flex; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; gap: 9px; }
.board-controls select { width: 165px; }
.board-filter-control { display: grid; gap: 3px; min-width: 150px; color: var(--muted); font-size: 11px; }
.board-filter-control > span { margin: 0; line-height: 1; }
.board-filter-control select { min-height: 34px; }
.board-sort-controls { display: inline-flex; flex-wrap: wrap; gap: 7px; align-items: center; border: 1px solid #d3deec; border-radius: 8px; background: #f8fbff; padding: 5px 7px; }
.board-sort-controls select { width: 130px; min-height: 32px; font-size: 12px; }
.board-sort-controls span { color: #315b97; font-size: 12px; font-weight: 700; white-space: nowrap; }
.board-note { margin: -2px 0 13px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.board-realtime-notice { margin: -2px 0 9px; border: 1px solid #b9d3ff; border-radius: 7px; background: #f3f7ff; color: #24528f; padding: 8px 11px; font-size: 13px; }
.board-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 10px; border: 1px solid #dbe5f1; border-radius: 7px; background: #fbfdff; padding: 8px 10px; color: #475467; font-size: 13px; }
.board-bulk-bar label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.board-bulk-bar input, .board-row-select { width: 16px; height: 16px; accent-color: #1769ff; }
.board-bulk-bar span { margin-right: auto; color: var(--muted); }
.board-row-select-wrap { display: inline-flex; align-items: center; margin-right: 7px; }
.compact-card > .board-row-select-wrap { position: absolute; z-index: 4; top: 9px; left: 9px; margin: 0; border-radius: 5px; background: rgba(255,255,255,.92); padding: 4px; }
.compact-card { position: relative; }
.board-status-text { display: inline-block; color: #667085; font-weight: 700; white-space: nowrap; }
.board-status-text.status-syncing { color: #175cd3; }
.board-status-text.status-not-live { color: #475467; }
.board-status-text.status-unavailable { color: #98a2b3; }
.anchor-board { display: grid; max-height: 70vh; gap: 10px; overflow: auto; padding-right: 7px; scrollbar-color: #8ca9d6 #edf2f8; scrollbar-width: thin; }
.anchor-board.table-mode { display: block; padding-right: 0; }
.anchor-board.compact-mode { display: grid; }
.anchor-board::-webkit-scrollbar { width: 9px; }
.anchor-board::-webkit-scrollbar:horizontal { height: 9px; }
.anchor-board::-webkit-scrollbar-track { border-radius: 9px; background: #edf2f8; }
.anchor-board::-webkit-scrollbar-thumb { border-radius: 9px; background: #8ca9d6; }
.board-load-state { min-height: 24px; padding-top: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.anchor-card { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 15px; border: 1px solid #dae4f0; border-radius: 8px; background: #fff; padding: 12px; }
.board-cover { position: relative; width: 176px; height: 99px; overflow: hidden; border-radius: 6px; background: #eaf0f8; }
.board-cover-image { width: 100%; height: 100%; object-fit: cover; }
.board-cover-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #667085; font-size: 12px; text-align: center; padding: 12px; }
.board-cover-edit { position: absolute; right: 6px; bottom: 6px; min-height: 26px; border: 1px solid rgba(255,255,255,.7); border-radius: 4px; background: rgba(12,31,61,.78); color: #fff; cursor: pointer; padding: 0 7px; font-size: 11px; line-height: 24px; }
.board-cover-edit:hover { background: rgba(23,105,255,.94); }
.board-cover-edit input { display: none; }
.live-badge { position: absolute; top: 7px; right: 7px; border-radius: 4px; background: rgba(30,41,59,.78); color: #fff; padding: 3px 6px; font-size: 11px; }
.live-badge.is-live { background: #e83868; }
.anchor-card-main { min-width: 0; }
.anchor-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.anchor-card-head h3 { font-size: 16px; }
.anchor-card-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.layer-tag { flex: 0 0 auto; border: 1px solid #d5e3f9; border-radius: 999px; background: #f4f8ff; color: #3863a0; padding: 3px 7px; font-size: 12px; }
.classification-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.category-tag { position: relative; display: inline-flex; max-width: 100%; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 700; cursor: default; }
.category-tag::after { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 8px); display: none; width: max-content; max-width: 300px; border: 1px solid #d7e2f0; border-radius: 7px; background: #101828; color: #fff; box-shadow: 0 10px 28px rgba(5, 18, 38, .2); padding: 8px 10px; font-size: 12px; font-weight: 400; line-height: 1.45; white-space: normal; content: attr(data-tooltip); }
.category-tag::before { position: absolute; z-index: 21; left: 18px; bottom: calc(100% + 3px); display: none; width: 10px; height: 10px; background: #101828; transform: rotate(45deg); content: ""; }
.category-tag:hover::after, .category-tag:hover::before { display: block; }
.category-tag[data-tooltip=""]::after, .category-tag[data-tooltip=""]::before { display: none; }
.tag-more { flex: 0 0 auto; }
.tag-red { border: 1px solid #ffc9c9; background: #ffecec; color: #b42318; }
.tag-orange { border: 1px solid #ffd7b5; background: #fff3e8; color: #b65b13; }
.tag-blue { border: 1px solid #c8dcff; background: #edf4ff; color: #175cd3; }
.tag-green { border: 1px solid #bce6ca; background: #ebf8f0; color: #087443; }
.tag-muted { border: 1px solid #d7e2f0; background: #f4f7fb; color: #667085; }
.live-title { overflow: hidden; margin-top: 7px; color: #344054; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.anchor-metrics { display: grid; grid-template-columns: repeat(6, minmax(72px, 1fr)); gap: 7px; margin-top: 10px; }
.anchor-metrics span { min-width: 0; border-left: 2px solid #d8e5f7; padding-left: 7px; }
.anchor-metrics b { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.anchor-metrics span { color: #24344c; font-size: 13px; font-weight: 700; }
.anchor-metrics small { display: block; overflow: hidden; margin-top: 2px; color: #4672ad; font-size: 10px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.anchor-issues, .anchor-action { margin-top: 8px; color: #475467; font-size: 13px; line-height: 1.55; }
.anchor-action { color: #315b97; }
.diagnosis-block { margin-top: 10px; border: 1px solid #dce7f4; border-radius: 8px; background: #fbfdff; padding: 10px 12px; color: #344054; font-size: 13px; line-height: 1.55; }
.diagnosis-block p { margin-top: 6px; }
.diagnosis-block b { color: #24344c; }
.diagnosis-notes { color: var(--muted); font-size: 12px; }
.diagnosis-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.severity-badge { display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.severity-badge.severity-red { background: #ffe7e7; color: #b42318; }
.severity-badge.severity-orange { background: #fff2df; color: #b65b13; }
.severity-badge.severity-blue { background: #e8f1ff; color: #175cd3; }
.severity-badge.severity-green { background: #e8f7ef; color: #087443; }
.maintenance-block { margin-top: 10px; border: 1px solid #dce7f4; border-radius: 8px; background: #fff; padding: 10px 12px; color: #344054; font-size: 13px; line-height: 1.55; }
.maintenance-block.empty { background: #f8fbff; }
.maintenance-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.maintenance-head b { color: #24344c; }
.maintenance-status { border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.maintenance-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.maintenance-metrics span { min-width: 0; border-left: 2px solid #d8e5f7; padding-left: 7px; color: #24344c; font-weight: 700; }
.maintenance-metrics b { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.maintenance-block p { margin-top: 7px; color: #526176; }
.board-follow { margin-top: 8px; }
.period-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.period-card { border: 1px solid #dce7f4; border-radius: 8px; background: #fbfdff; padding: 11px; }
.period-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.period-head b { color: #174ea6; font-size: 14px; }
.period-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.period-head .mini { min-height: 28px; padding: 0 8px; font-size: 12px; }
.period-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
.period-metrics span { min-width: 0; border-left: 2px solid #d8e5f7; padding-left: 7px; color: #172033; font-weight: 700; }
.period-metrics b { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.period-compare { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; color: #526176; font-size: 12px; }
.period-compare span { border-radius: 999px; background: #eef5ff; padding: 2px 7px; }
.period-compare.muted, .target-empty, .target-row.muted { color: var(--muted); font-size: 12px; }
.target-empty { margin-top: 10px; border: 1px dashed #d7e2f0; border-radius: 7px; background: #f8fbff; padding: 9px; }
.target-progress-list { display: grid; gap: 9px; margin-top: 10px; }
.target-row > div { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; }
.target-row span { color: var(--muted); }
.target-row b { color: #b65b13; font-size: 13px; }
.target-row i { display: block; overflow: hidden; height: 6px; border-radius: 3px; background: #e8edf4; margin-top: 5px; }
.target-row em { display: block; height: 100%; border-radius: inherit; background: #f59e0b; }
.target-row.tone-green b { color: var(--success); }
.target-row.tone-green em { background: var(--success); }
.target-row.tone-red b { color: #b42318; }
.target-row.tone-red em { background: #ef4444; }
.target-modal { width: min(620px, 100%); }

.board-mode-toggle { display: inline-flex; overflow: hidden; border: 1px solid #d3deec; border-radius: 7px; background: #fff; }
.board-mode-toggle button { min-height: 38px; border: 0; border-radius: 0; background: transparent; }
.board-mode-toggle button.active { background: var(--blue); color: #fff; }
.board-job-state { min-height: 20px; margin: 4px 0 8px; color: #3863a0; font-size: 13px; }
.link-button { border: 0; background: transparent; color: #175cd3; cursor: pointer; font-size: 12px; font-weight: 700; padding: 0; }

.anchor-card.compact-card { display: block; border-color: #dbe5f1; padding: 0; overflow: visible; }
.anchor-summary { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(160px, .65fr) minmax(190px, .85fr) minmax(190px, .85fr) minmax(150px, .6fr) minmax(180px, .75fr) auto; gap: 0; align-items: stretch; }
.anchor-summary > * { min-width: 0; border-left: 1px solid #e5edf6; padding: 12px; }
.anchor-summary > *:first-child { border-left: 0; }
.anchor-identity { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 12px; align-items: start; }
.identity-text h3 { font-size: 16px; margin-bottom: 3px; }
.identity-text > span { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.identity-text .classification-tags { margin-top: 7px; }
.today-summary b, .board-target-summary b, .maintenance-summary b { display: block; color: #24344c; font-size: 13px; margin-bottom: 8px; }
.today-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.today-metrics span { color: #172033; font-size: 14px; font-weight: 800; }
.today-metrics small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.monthly-efficiency { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; border-top: 1px solid #e5edf6; padding-top: 8px; color: #526176; font-size: 12px; line-height: 1.35; }
.monthly-efficiency b { flex: 0 0 100%; margin-bottom: 0; color: var(--muted); font-size: 11px; font-weight: 400; }
.monthly-efficiency span { color: #24344c; font-weight: 700; }
.summary-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.target-mini-list { display: grid; gap: 7px; }
.target-mini { display: flex; justify-content: space-between; gap: 8px; border-radius: 6px; background: #fff3e8; color: #b65b13; padding: 5px 7px; font-size: 12px; font-weight: 700; }
.target-mini.done { background: #ebf8f0; color: #087443; }
.target-mini.muted, .target-mini-empty { border: 1px dashed #d7e2f0; background: #f8fbff; color: var(--muted); }
.target-compact-list { display: grid; gap: 4px; }
.target-compact-row { min-width: 0; }
.target-compact-row > div { display: flex; min-width: 0; justify-content: space-between; gap: 6px; align-items: center; color: #526176; font-size: 10px; line-height: 1.1; }
.target-compact-row span { flex: 0 0 auto; }
.target-compact-row b { overflow: hidden; color: #b65b13; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.target-compact-row i { display: block; overflow: hidden; height: 3px; border-radius: 2px; background: #e8edf4; margin-top: 2px; }
.target-compact-row em { display: block; height: 100%; border-radius: inherit; background: #f59e0b; }
.target-compact-row.tone-green b { color: #087443; }
.target-compact-row.tone-green em { background: #22a06b; }
.target-compact-row.tone-red b { color: #b42318; }
.target-compact-row.tone-red em { background: #ef4444; }
.target-compact-row.tone-muted b { color: var(--muted); font-weight: 500; }
.target-compact-row.tone-muted em { background: #cbd5e1; }
.maintenance-summary.empty { color: var(--muted); }
.maintenance-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.maintenance-mini-grid span { border-radius: 6px; background: #f8fbff; padding: 6px; color: #172033; font-size: 13px; font-weight: 800; }
.maintenance-mini-grid b { margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.net-up { color: #087443 !important; }
.net-down { color: #b42318 !important; }
.net-flat { color: #344054 !important; }
.net-muted { color: var(--muted) !important; }
.diagnosis-summary { color: #344054; font-size: 13px; line-height: 1.45; }
.diagnosis-summary p { margin-top: 7px; }
.diagnosis-summary b { margin-right: 6px; color: #24344c; }
.board-card-actions { display: grid; gap: 8px; align-content: center; min-width: 126px; }
.board-card-actions .danger-soft { margin-left: 0; }
.anchor-detail { border-top: 1px solid #e5edf6; background: #fbfdff; padding: 12px; }
.board-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.board-detail-actions .board-follow { margin-top: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.detail-card { border: 1px solid #dce7f4; border-radius: 8px; background: #fff; padding: 10px 12px; color: #475467; font-size: 13px; line-height: 1.6; }
.detail-card h4 { margin-bottom: 7px; color: #24344c; font-size: 14px; }
.maintenance-detail-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.maintenance-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.maintenance-split h4 { margin-bottom: 8px; color: #24344c; font-size: 14px; }
.medal-distribution { display: grid; gap: 7px; }
.medal-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 38px; gap: 8px; align-items: center; color: #526176; font-size: 12px; }
.medal-row i { display: block; overflow: hidden; height: 8px; border-radius: 999px; background: #eaf0f8; }
.medal-row em { display: block; height: 100%; border-radius: inherit; background: #1769ff; }
.medal-row b { text-align: right; color: #24344c; }
.medal-empty { border: 1px dashed #d7e2f0; border-radius: 7px; background: #f8fbff; color: var(--muted); padding: 10px; font-size: 12px; }

.board-table-shell { min-width: max-content; }
.board-data-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; color: #24344c; font-size: 12px; }
.board-data-table col.board-col-anchor { width: 230px; }
.board-data-table col.board-col-owner { width: 116px; }
.board-data-table col.board-col-tags { width: 190px; }
.board-data-table th, .board-data-table td { height: 72px; border-right: 1px solid #e5edf6; border-bottom: 1px solid #e5edf6; background: #fff; padding: 8px 9px; text-align: left; vertical-align: middle; }
.board-data-table th { position: sticky; z-index: 12; top: 0; height: 40px; background: #f3f7fc; color: #476482; font-size: 11px; font-weight: 700; white-space: nowrap; }
.board-data-table tr:first-child th { border-top: 1px solid #dbe5f1; }
.board-data-table th:first-child, .board-data-table td:first-child { border-left: 1px solid #dbe5f1; }
.board-data-table tbody tr.board-table-row { cursor: pointer; }
.board-data-table tbody tr.board-table-row:hover > td, .board-data-table tbody tr.board-table-row:focus > td { background: #f8fbff; }
.board-data-table tbody tr.board-table-row.expanded > td { background: #eef5ff; }
.board-data-table .sticky-col { position: sticky; z-index: 6; background: #fff; }
.board-data-table th.sticky-col { z-index: 16; background: #f3f7fc; }
.board-data-table .sticky-anchor { left: 0; }
.board-data-table .sticky-owner { left: 230px; }
.board-data-table .sticky-tags { left: 346px; box-shadow: 5px 0 8px -7px rgba(24, 51, 88, .45); }
.board-data-table .classification-tags { overflow: hidden; max-height: 48px; gap: 4px; margin-top: 0; }
.board-data-table .category-tag { padding: 2px 6px; font-size: 10px; white-space: nowrap; }
.board-sort-header { min-height: 28px; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; font: inherit; font-weight: 700; white-space: nowrap; }
.board-sort-header:hover { color: #175cd3; }
.table-anchor-identity { display: grid; grid-template-columns: 16px 72px minmax(0, 1fr); gap: 8px; align-items: center; }
.table-anchor-cover { position: relative; overflow: hidden; width: 72px; height: 42px; border-radius: 4px; background: #eaf0f8; }
.table-anchor-cover .board-cover-placeholder { padding: 3px; font-size: 9px; }
.table-live-dot { position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border: 1px solid #fff; border-radius: 50%; background: #98a2b3; }
.table-live-dot.is-live { background: #e83868; }
.table-anchor-identity b, .table-anchor-identity span, .table-anchor-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-anchor-identity b { color: #172033; font-size: 13px; }
.table-anchor-identity span { margin-top: 3px; color: #7b8798; font-size: 10px; font-weight: 400; }
.table-anchor-identity small { margin-top: 2px; color: #526176; font-size: 10px; }
.table-owner { display: block; overflow: hidden; color: #344054; text-overflow: ellipsis; white-space: nowrap; }
.table-main-issue { display: flex; gap: 6px; align-items: flex-start; line-height: 1.45; }
.severity-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #22a06b; margin-top: 5px; }
.severity-dot.severity-red { background: #ef4444; }
.severity-dot.severity-orange { background: #f59e0b; }
.severity-dot.severity-blue { background: #3b82f6; }
.board-table-detail > td { height: auto; border-left: 1px solid #dbe5f1; background: #fbfdff; padding: 0; }
.board-table-detail .anchor-detail { border-top: 0; }
.anchor-board.dense-rows .board-data-table th, .anchor-board.dense-rows .board-data-table td { height: 58px; padding-top: 5px; padding-bottom: 5px; }
.anchor-board.dense-rows .table-anchor-cover { height: 36px; }

.board-columns-modal { width: min(720px, 100%); }
.board-row-height-field { max-width: 260px; }
.board-column-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.board-column-group { border: 1px solid #dce7f4; border-radius: 7px; padding: 10px; }
.board-column-group h3 { margin-bottom: 7px; color: #24344c; font-size: 13px; }
.board-column-option { display: flex; min-height: 34px; justify-content: space-between; gap: 8px; align-items: center; border-top: 1px solid #edf1f6; padding: 5px 0; }
.board-column-option:first-of-type { border-top: 0; }
.board-column-option label { display: flex; min-width: 0; gap: 7px; align-items: center; color: #344054; font-size: 12px; }
.board-column-option label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-column-option > div { display: flex; gap: 4px; }
.board-column-option .mini { min-width: 42px; min-height: 26px; padding: 0 6px; font-size: 10px; }

@media (max-width: 1500px) {
  .anchor-summary { grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(180px, .8fr)) minmax(150px, .7fr); }
  .today-summary, .diagnosis-summary, .board-card-actions { border-top: 1px solid #e5edf6; }
}

.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; max-width: 760px; margin-bottom: 13px; }
.query-result { min-height: 180px; border: 1px solid #e0e8f2; border-radius: 8px; background: #fbfcff; padding: 15px; }
.query-result h4 { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
.query-result h4 span { color: var(--muted); font-weight: 400; }
.query-result p, .mini-list span { display: block; margin-top: 9px; color: #475467; font-size: 14px; line-height: 1.65; }
.mini-list { display: grid; gap: 8px; margin-top: 10px; }
.mini-list div { border-top: 1px solid #e9eef5; padding-top: 9px; }

.task-create { border-top: 1px solid #e2e9f2; border-bottom: 1px solid #e2e9f2; margin: 0 0 17px; padding: 17px 0; }
.section-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading h3 { font-size: 15px; }
.section-heading span, .task-context { color: var(--muted); font-size: 13px; line-height: 1.6; }
.task-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.field.wide { grid-column: 1 / -1; }
.task-context { margin-bottom: 14px; border-left: 3px solid #74a7ff; background: #f6f9ff; padding: 10px 12px; }
.task-toolbar { margin-bottom: 13px; }
.task-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { min-height: 32px; border: 1px solid #d3deec; background: #fff; color: #475467; padding: 0 11px; font-size: 13px; }
.filter.active { border-color: var(--blue); background: var(--blue-soft); color: #0b5bd3; }
.task-item, .knowledge-item { border: 1px solid #dfe7f1; border-radius: 8px; background: #fff; padding: 16px; }
.task-head, .knowledge-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.task-head > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.task-head h3, .knowledge-head h3 { font-size: 16px; }
.task-status { display: inline-flex; align-items: center; min-height: 23px; border-radius: 999px; background: #eef2f8; color: #475467; padding: 0 8px; font-size: 12px; }
.status-submitted, .status-returned { background: var(--warn-bg); color: var(--warn); }
.status-approved { background: #eaf8ef; color: var(--success); }
.status-overdue { background: #fff0ef; color: var(--danger); }
.status-in_progress { background: var(--blue-soft); color: #0b5bd3; }
.status-draft { background: #edf0f5; color: #5e6878; }
.task-deadline, .knowledge-head > div:last-child > span { flex: 0 0 auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.task-target, .task-description, .task-summary, .task-problem, .review-note, .knowledge-item p { margin-top: 10px; color: #475467; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.task-problem { border-left: 3px solid #f0aa47; padding-left: 10px; }
.task-summary { color: #315b97; }
.task-submit-box, .task-review-box { border-top: 1px solid #e9eef5; margin-top: 14px; padding-top: 14px; }
.task-review-box h4 { margin-bottom: 11px; font-size: 14px; }
.submission-list { display: grid; gap: 10px; margin-top: 14px; }
.submission-item { border-left: 3px solid #9bbcf8; background: #f7faff; padding: 11px 12px; }
.submission-item b { font-size: 13px; }
.submission-item span { margin-left: 8px; color: var(--muted); font-size: 12px; }
.submission-item p { margin-top: 6px; color: #475467; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.proof-links { margin-top: 7px; color: var(--muted); font-size: 13px; }
.proof-links a { color: #0b5bd3; }
.review-note { border-left: 3px solid #58a878; background: #f4fbf6; padding: 10px 12px; }
.check-line { display: flex; gap: 8px; align-items: center; color: #475467; font-size: 13px; }
.check-line input { width: 16px; height: 16px; }
.hidden-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.proof-dropzone { display: grid; gap: 4px; margin: 0 0 13px; border: 1px dashed #9ebcec; border-radius: 7px; background: #f8fbff; cursor: pointer; padding: 13px; color: #3a5880; outline: none; }
.proof-dropzone:focus, .proof-dropzone.dragging { border-color: var(--blue); background: #edf5ff; box-shadow: 0 0 0 3px rgba(23,105,255,.1); }
.proof-dropzone b { color: #174ea6; font-size: 13px; }
.proof-dropzone span, .proof-dropzone small { color: var(--muted); font-size: 12px; line-height: 1.5; }

.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; overflow-y: auto; place-items: start center; background: rgba(8, 20, 43, .54); padding: 34px 18px; }
.modal-backdrop[hidden] { display: none; }
.followup-modal { width: min(820px, 100%); max-height: calc(100vh - 68px); overflow-y: auto; border: 1px solid #d5e0ee; border-radius: 8px; background: #fff; box-shadow: 0 20px 55px rgba(4, 20, 49, .32); padding: 22px; }
.rules-modal { width: min(980px, 100%); }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.rules-grid article { border: 1px solid #dce7f4; border-radius: 8px; background: #fbfdff; padding: 12px; }
.rules-grid h3 { margin-bottom: 7px; color: #172033; font-size: 15px; }
.rules-grid p { color: #475467; font-size: 13px; line-height: 1.55; margin-top: 5px; }
.rules-grid b { color: #24344c; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.modal-head h2 { margin-top: 4px; font-size: 20px; }
.modal-close { width: 34px; min-width: 34px; min-height: 34px; border: 1px solid #d7e0ed; background: #fff; color: #526176; padding: 0; font-size: 22px; }
.modal-close:hover { background: #f3f6fb; }
.modal-note { margin: 12px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.modal-existing { margin: 0 0 14px; border-left: 3px solid #e1a449; background: #fff7e9; color: #8e5b11; padding: 10px 12px; font-size: 13px; line-height: 1.55; }
.followup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.followup-modal input[readonly] { background: #f7f9fc; color: #526176; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; border-top: 1px solid #e5ebf3; margin-top: 5px; padding-top: 16px; }

.knowledge-search { display: flex; gap: 8px; }
.knowledge-search input { width: 250px; }
.knowledge-item.is-hidden { border-color: #e0c895; background: #fffaf1; }
.knowledge-head > div:first-child > span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.knowledge-actions { display: flex; align-items: center; gap: 8px; }
.hidden-tag { border-radius: 999px; background: #f2e3bb; color: #846400; padding: 3px 7px; }
.knowledge-summary { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.case-details { border-top: 1px solid #e6edf5; margin-top: 14px; padding-top: 13px; }
.case-details[hidden] { display: none; }
.case-media { margin-top: 12px; color: #344054; font-size: 13px; }
.case-media-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
.case-image-link { display: block; width: 140px; height: 100px; overflow: hidden; border: 1px solid #dce6f4; border-radius: 6px; background: #eef3fa; }
.case-image-link img { width: 100%; height: 100%; object-fit: cover; }
.case-file-link { border: 1px solid #cfe0ff; border-radius: 5px; background: #f4f8ff; color: #0b5bd3; padding: 7px 9px; text-decoration: none; }
.muted-text { color: var(--muted) !important; }

.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings-grid > div { border-left: 3px solid #87acf1; background: #f8fbff; padding: 14px; }
.settings-grid h3 { font-size: 15px; }
.settings-grid p { margin-top: 8px; color: #475467; font-size: 13px; line-height: 1.65; }

.stable-workbench-card { grid-column: 1 / -1; }
.stable-workbench-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stable-workbench-metrics div:nth-child(2), .stable-overview-grid div:nth-child(2) { border-left-color: #67b486; }
.stable-workbench-metrics div:nth-child(5), .stable-overview-grid div:nth-child(6) { border-left-color: #efad5d; }
.stable-workbench-metrics div:nth-child(7), .stable-overview-grid div:nth-child(8) { border-left-color: #e5756c; }
.stable-workbench-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 13px; border-top: 1px solid #e4eaf2; padding-top: 12px; color: var(--muted); font-size: 12px; }
.stable-head-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.stable-cache-state { margin-bottom: 14px; border-left: 3px solid #78a4e8; background: #f6f9ff; color: #36577f; padding: 10px 12px; font-size: 13px; line-height: 1.55; }
.stable-cache-state.refreshing { border-left-color: #e9a23b; background: #fff8ec; color: #86550d; }
.stable-cache-state.error { border-left-color: #d92d20; background: #fff5f4; color: #9b291f; }
.stable-overview-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.stable-overview-grid > div { min-width: 0; min-height: 78px; border-left: 3px solid #d4e2f4; background: #f9fbfe; padding: 11px; }
.stable-overview-grid span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.stable-overview-grid strong { display: block; margin-top: 7px; color: #172033; font-size: 21px; }
.stable-prediction-scopes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.stable-scope-item { border: 1px solid #dfe7f1; border-radius: 7px; background: #fff; padding: 12px; }
.stable-scope-item h3 { font-size: 14px; }
.stable-scope-item p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.stable-scope-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.stable-scope-stats span { color: #526176; font-size: 11px; line-height: 1.4; }
.stable-scope-stats b { display: block; margin-top: 3px; color: #24466f; font-size: 15px; }
.stable-distribution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.stable-distribution-grid h3 { margin-bottom: 12px; font-size: 15px; }
.stable-bars { display: grid; gap: 9px; }
.stable-bar-row { display: grid; grid-template-columns: minmax(82px, auto) minmax(80px, 1fr) 34px; gap: 8px; align-items: center; color: #526176; font-size: 12px; }
.stable-bar-track { height: 8px; overflow: hidden; border-radius: 4px; background: #e8edf4; }
.stable-bar-fill { height: 100%; border-radius: inherit; background: #3479d8; }
.stable-bar-row:nth-child(3n + 2) .stable-bar-fill { background: #3e9a69; }
.stable-bar-row:nth-child(3n) .stable-bar-fill { background: #dc8c32; }
.stable-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #e0e7f0; border-radius: 8px; }
.stable-table-wrap table { width: 100%; min-width: 980px; border-collapse: collapse; background: #fff; }
.stable-operators-panel table { min-width: 1260px; }
.stable-table-wrap th, .stable-table-wrap td { border-bottom: 1px solid #edf1f6; padding: 10px; text-align: left; vertical-align: top; font-size: 12px; line-height: 1.5; }
.stable-table-wrap th { background: #f5f7fb; color: #475467; white-space: nowrap; }
.stable-table-wrap td strong { display: block; color: #24344c; font-size: 13px; }
.stable-table-wrap td small { display: block; margin-top: 2px; color: var(--muted); }
.stable-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.stable-filter-grid > input:first-child { grid-column: span 2; }
.stable-filter-grid input, .stable-filter-grid select { width: 100%; min-height: 40px; border: 1px solid #cfd9e8; border-radius: 6px; background: #fff; color: var(--text); outline: none; padding: 0 10px; }
.stable-filter-grid input:focus, .stable-filter-grid select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,255,.12); }
.stable-quality-note { margin: 0 0 12px; border-left: 3px solid #e5a149; background: #fff9ef; color: #7f571d; padding: 9px 11px; font-size: 12px; line-height: 1.55; }
.stable-quality-note:empty { display: none; }
.stable-anchor-table { min-width: 1180px !important; }
.stable-status { display: inline-flex; min-height: 23px; align-items: center; border-radius: 999px; background: #edf3fb; color: #315b97; padding: 0 8px; font-size: 11px; white-space: nowrap; }
.stable-status.warn { background: #fff2df; color: #965a0a; }
.stable-status.danger { background: #fff0ef; color: #a72b21; }
.stable-status.protected { background: #eaf7ef; color: #287447; }
.stable-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 13px; color: var(--muted); font-size: 13px; }
.stable-target-modal { width: min(700px, 100%); }
.stable-operator-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; max-height: 320px; overflow-y: auto; border-top: 1px solid #e5ebf3; padding-top: 13px; }
.stable-operator-targets .field { margin-bottom: 0; }
.stable-workbench-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stable-confirmation-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid #e0e7f0; border-radius: 8px; overflow: hidden; }
.stable-confirmation-summary > div { min-width: 0; border-left: 3px solid #d4e3f8; padding: 12px 14px; }
.stable-confirmation-summary > div:nth-child(3) { border-left-color: #e6a345; }
.stable-confirmation-summary > div:nth-child(4) { border-left-color: #df665f; }
.stable-confirmation-summary span { display: block; color: var(--muted); font-size: 12px; }
.stable-confirmation-summary strong { display: block; margin-top: 5px; color: #142a4a; font-size: 20px; }
.stable-anchor-table { min-width: 1540px !important; }
.stable-pending-reason { max-width: 220px; color: #526176; line-height: 1.55; }
.stable-pending-reason.warn { color: #965a0a; }
.stable-pending-reason.danger { color: #a72b21; }
.stable-confirmation-modal { width: min(780px, 100%); }
.stable-confirmation-anchor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 15px; border: 1px solid #dce5f1; border-radius: 8px; background: #f8fafc; padding: 12px; }
.stable-confirmation-anchor span { color: var(--muted); font-size: 11px; }
.stable-confirmation-anchor strong { display: block; margin-top: 3px; color: #20344f; font-size: 13px; overflow-wrap: anywhere; }
.stable-confirmation-impact { margin: 0 0 14px; border-left: 3px solid #3479d8; background: #f1f6fd; color: #315b97; padding: 9px 11px; font-size: 12px; line-height: 1.55; }
.stable-confirmation-history { border-top: 1px solid #e5ebf3; padding-top: 14px; }
.stable-confirmation-history h3 { margin-bottom: 9px; font-size: 14px; }
.stable-confirmation-history-list { display: grid; gap: 7px; max-height: 170px; overflow-y: auto; }
.stable-confirmation-history-item { border-left: 3px solid #d4e3f8; background: #f8fafc; padding: 8px 10px; color: #526176; font-size: 12px; line-height: 1.5; }

@media (max-width: 1120px) {
  .revenue-period-card dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .data-grid, .settings-grid, .workbench-summary-grid { grid-template-columns: 1fr; }
  .summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anchor-metrics { grid-template-columns: repeat(3, minmax(74px, 1fr)); }
  .operator-period-grid { grid-template-columns: 1fr; }
  .operator-stat-grid { grid-template-columns: repeat(3, minmax(86px, 1fr)); }
  .stable-workbench-metrics, .stable-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stable-confirmation-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stable-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stable-filter-grid > input:first-child { grid-column: span 2; }
}

@media (max-width: 820px) {
  .revenue-department-grid, .revenue-target-department, .revenue-target-row { grid-template-columns: 1fr; }
  .revenue-hours-summary, .revenue-detail-toolbar { align-items: flex-start; flex-direction: column; }
  .revenue-hours-summary small { text-align: left; }
  .revenue-detail-sort { width: 100%; flex-wrap: wrap; }
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; overflow: visible; }
  .brand { min-height: auto; padding: 18px 20px; }
  .main-nav { display: flex; overflow-x: auto; gap: 6px; padding: 10px; }
  .nav-label { display: none; }
  .nav-item { flex: 0 0 auto; width: auto; min-height: 36px; padding: 0 11px; }
  .account-box { grid-template-columns: 1fr 1fr; margin: 0; border-radius: 0; border-width: 1px 0 0; }
  .account-label, .permission-note { grid-column: 1 / -1; }
  .workspace { padding: 0 14px 28px; }
  .workspace-header { padding: 20px 0 16px; }
  .metric-grid { grid-template-columns: 1fr; }
  .workbench-search { width: 100%; grid-template-columns: 1fr; }
  .summary-metrics { grid-template-columns: 1fr; }
  .recommendation-head { flex-direction: column; }
  .recommendation-tags { justify-content: flex-start; }
  .board-title, .panel-title, .workspace-header { align-items: flex-start; flex-direction: column; }
  .board-controls, .knowledge-search { width: 100%; }
  .board-controls select, .knowledge-search input { width: 100%; }
  .anchor-card { grid-template-columns: 1fr; }
  .anchor-summary, .anchor-identity, .detail-grid, .maintenance-split { grid-template-columns: 1fr; }
  .anchor-summary > * { border-left: 0; border-top: 1px solid #e5edf6; }
  .anchor-summary > *:first-child { border-top: 0; }
  .board-card-actions { grid-template-columns: 1fr; }
  .board-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .anchor-board.compact-mode { max-height: none; overflow: visible; padding-right: 0; }
  .anchor-board.table-mode { max-height: 72vh; overflow: auto; padding-right: 0; }
  .anchor-metrics { grid-template-columns: repeat(2, minmax(72px, 1fr)); }
  .maintenance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .period-cards { grid-template-columns: 1fr; }
  .period-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operator-toolbar { grid-template-columns: 1fr; }
  .operator-metrics, .operator-stat-grid { grid-template-columns: 1fr; }
  .operator-card-head { flex-direction: column; }
  .task-create-grid, .inline-form, .followup-grid { grid-template-columns: 1fr; }
  .field.wide { grid-column: auto; }
  .section-heading, .task-head, .knowledge-head, .knowledge-actions { align-items: flex-start; flex-direction: column; }
  .modal-backdrop { padding: 12px; }
  .followup-modal { max-height: calc(100vh - 24px); padding: 17px; }
  .rules-grid { grid-template-columns: 1fr; }
  .stable-workbench-footer, .stable-head-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .stable-workbench-metrics, .stable-overview-grid, .stable-prediction-scopes, .stable-distribution-grid, .stable-filter-grid, .stable-operator-targets, .stable-confirmation-summary, .stable-confirmation-anchor { grid-template-columns: 1fr; }
  .stable-filter-grid > input:first-child { grid-column: auto; }
  .stable-pagination { justify-content: center; }
  .board-column-options { grid-template-columns: 1fr; }
}

.board-pagination { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; }
.board-pagination label { display:flex; align-items:center; gap:8px; }
.board-pagination select { width:auto; min-width:76px; }
#boardPageInfo { margin-right:auto; color:var(--muted, #52657e); }