/*!
 * brand-update.css — styles for the Brand Update engine.
 *
 * Every selector is prefixed `.bu-` and scoped under `.bu-root`, so this cannot
 * touch a host page's existing styles. It sets no rules on bare element
 * selectors (table, input, button) outside that scope.
 *
 * Colours come from CSS variables with fallbacks, so it inherits a host's theme
 * where one exists and still looks right where it doesn't.
 */

.bu-root {
  --bu-bg:        var(--surface-1, #171a21);
  --bu-bg2:       var(--surface-2, #1e222b);
  --bu-line:      var(--border, #2a2f3a);
  --bu-ink:       var(--text-primary, #e8eaf0);
  --bu-ink2:      var(--text-secondary, #b6bdcc);
  --bu-muted:     var(--text-muted, #98a0b0);
  --bu-accent:    var(--s1, #4c8dff);
  --bu-good:      var(--good, #3fbf7f);
  --bu-bad:       var(--critical, #e5615e);
  color: var(--bu-ink);
  font-size: 14px;
  line-height: 1.5;
}

.bu-root .bu-card {
  background: var(--bu-bg); border: 1px solid var(--bu-line);
  border-radius: 12px; padding: 16px; margin-top: 14px;
}
.bu-root .bu-grid2, .bu-root .bu-grid3 { display: grid; gap: 14px; margin-top: 14px; }
.bu-root .bu-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bu-root .bu-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 900px) {
  .bu-root .bu-grid2, .bu-root .bu-grid3 { grid-template-columns: 1fr; }
}

.bu-root .bu-field { display: flex; flex-direction: column; gap: 4px; }
.bu-root .bu-field label { font-size: 12.5px; color: var(--bu-muted); font-weight: 600; }
.bu-root .bu-field input, .bu-root .bu-field select, .bu-root .bu-list {
  font: inherit; color: var(--bu-ink); background: var(--bu-bg2);
  border: 1px solid var(--bu-line); border-radius: 8px; padding: 7px 10px; width: 100%;
}
.bu-root .bu-rate { padding: 7px 0; color: var(--bu-ink2); }

.bu-root .bu-h  { font-weight: 650; font-size: 15px; }
.bu-root .bu-h2 { font-weight: 650; font-size: 16px; margin: 22px 0 0; }
.bu-root .bu-h3 { font-weight: 650; font-size: 13px; margin-bottom: 4px; }
.bu-root .bu-sub, .bu-root .bu-sub2 { color: var(--bu-muted); font-size: 12.5px; }
.bu-root .bu-sub2 { margin-left: 10px; font-weight: 400; }
.bu-root .bu-sec { margin-top: 14px; }
.bu-root .bu-mt  { margin-top: 10px; }
.bu-root .bu-hide { display: none !important; }

.bu-root .bu-drop {
  border: 1.5px dashed var(--bu-line); border-radius: 10px; padding: 20px 14px;
  text-align: center; cursor: pointer; color: var(--bu-ink2); margin-top: 10px;
  transition: border-color .12s, background .12s;
}
.bu-root .bu-drop:hover, .bu-root .bu-drop.bu-over {
  border-color: var(--bu-accent); background: var(--bu-bg2); color: var(--bu-ink);
}
.bu-root .bu-drop b    { display: block; font-size: 14px; color: var(--bu-ink); }
.bu-root .bu-drop span { display: block; font-size: 12px; color: var(--bu-muted); }

.bu-root .bu-total {
  margin-top: 12px; font-size: 21px; font-weight: 650;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.bu-root .bu-total span { font-size: 12px; font-weight: 400; color: var(--bu-muted); }

.bu-root .bu-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bu-root .bu-table th, .bu-root .bu-table td {
  padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--bu-line); white-space: nowrap;
}
.bu-root .bu-table th {
  color: var(--bu-muted); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .03em;
}
.bu-root .bu-table .bu-r { text-align: right; font-variant-numeric: tabular-nums; }
.bu-root .bu-table tbody tr:hover { background: var(--bu-bg2); }

.bu-root .bu-banner {
  border-radius: 10px; padding: 10px 13px; font-size: 13px; margin-top: 12px;
  background: var(--bu-bg2); border: 1px solid var(--bu-line); color: var(--bu-ink2);
}
.bu-root .bu-banner b { color: var(--bu-ink); }
.bu-root .bu-banner.bu-warn {
  background: color-mix(in srgb, var(--bu-bad) 8%, var(--bu-bg2));
  border-color: color-mix(in srgb, var(--bu-bad) 30%, var(--bu-line));
}

.bu-root .bu-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bu-root .bu-btn {
  font: inherit; cursor: pointer; background: var(--bu-bg2); color: var(--bu-ink);
  border: 1px solid var(--bu-line); border-radius: 8px; padding: 8px 15px;
}
.bu-root .bu-btn:hover:not(:disabled) { filter: brightness(1.12); }
.bu-root .bu-btn:disabled { opacity: .5; cursor: not-allowed; }
.bu-root .bu-btn.bu-primary { background: var(--bu-accent); color: #fff; border-color: transparent; font-weight: 600; }
.bu-root .bu-msg { color: var(--bu-muted); font-size: 13px; }

.bu-root .bu-neg  { color: var(--bu-bad); }
.bu-root .bu-pos  { color: var(--bu-good); }
.bu-root .bu-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--bu-muted); }
.bu-root .bu-list { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }