.buff-checker {
  width: min(850px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px);
  padding: clamp(14px, 3vw, 26px); border: 1px solid #536174; border-radius: 14px;
  color: #eef4fa; background: #151e29; overflow: auto; box-sizing: border-box;
}
.buff-checker::backdrop { background: #070c12b8; }
.buff-checker h2, .buff-checker h3 { margin: 0; }
.buff-checker p { margin: 8px 0 14px; }
.bc-heading, .bc-slots { display: flex; gap: 12px; align-items: start; }
.bc-heading { justify-content: space-between; }
.bc-heading small { font-size: .62em; color: #a9e2d4; }
.bc-slot { flex: 1; min-width: 0; border: 1px solid #465467; border-radius: 10px; padding: 12px; }
.bc-slot h3 { margin-bottom: 8px; }
.bc-slot input { width: 100%; color: inherit; }
.bc-slot button { width: 100%; margin-bottom: 6px; border-style: dashed; text-align: left; }
.bc-slot img { display: block; margin-top: 8px; max-width: 100%; max-height: 105px; border-radius: 5px; }
.bc-slot img[hidden] { display: none; }
.bc-slot p, .bc-note { font-size: .87em; color: #c5d3df; }
.bc-slot p { margin: 6px 0 0; min-height: 1.3em; overflow-wrap: anywhere; }
.bc-table-wrap { overflow-x: auto; }
.buff-checker table { width: 100%; border-collapse: collapse; margin: 13px 0 7px; }
.buff-checker caption { text-align: left; font-weight: 700; padding: 0 0 5px; }
.buff-checker th, .buff-checker td { padding: 7px 8px; border-bottom: 1px solid #394759; text-align: left; vertical-align: top; }
.buff-checker td input {
  display: block; width: min(100%, 110px); min-width: 52px; padding: 5px 7px;
  box-sizing: border-box; border: 1px solid #5c6d7e; border-radius: 5px;
  color: inherit; background: #0d1520; font-variant-numeric: tabular-nums;
}
.buff-checker .bc-primary { color: #13262b; background: #a9e2d4; border-color: #a9e2d4; font-weight: 700; }
#bc-result { margin-top: 14px; }
#bc-result h3 { margin-top: 14px; }
#bc-result ol { margin: 8px 0; padding-left: 22px; }
#bc-result li { margin-bottom: 12px; }
@media (max-width: 550px) {
  .bc-slots { flex-direction: column; align-items: stretch; }
  .buff-checker th, .buff-checker td { padding: 6px 4px; }
}