.corn-volley-debug-panel {
  --debug-accent: #ffd85b;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.corn-volley-debug-panel header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.corn-volley-debug-panel header > div { display: grid; gap: 1px; }
.corn-volley-debug-panel header span { color: rgba(244, 251, 253, .58); font-size: 9px; font-weight: 750; }
.corn-volley-debug-panel header button { width: 30px; min-height: 30px; padding: 0; border-radius: 8px; font-size: 20px; }
.corn-volley-runtime {
  margin: 9px 11px 4px;
  padding: 7px 9px;
  border-left: 3px solid var(--debug-accent);
  border-radius: 7px;
  background: rgba(255, 216, 91, .08);
  color: #fff1ae;
  font-size: 11px;
  font-weight: 850;
}
.corn-volley-runtime[data-state="cooldown"] { border-left-color: #ff9b52; color: #ffc18d; }
.corn-volley-runtime[data-state="ground"] { border-left-color: #ffb12e; background: rgba(255, 177, 46, .12); color: #ffe59a; }
.corn-volley-runtime[data-state="error"] { border-left-color: #ff6f67; background: rgba(255, 76, 68, .1); color: #ffaaa3; }
.corn-volley-controls { display: grid; align-content: start; gap: 9px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 11px 10px; }
.corn-volley-control-group { display: grid; padding: 9px; border: 1px solid rgba(255, 216, 91, .14); border-radius: 9px; background: rgba(9, 16, 20, .45); }
.corn-volley-control-group h3 { margin: 0; padding-left: 8px; border-left: 3px solid var(--debug-accent); color: #fff0a4; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.corn-volley-control-group > p { margin: 4px 0 3px 11px; color: rgba(236, 246, 248, .54); font-size: 8px; line-height: 1.3; }
.corn-volley-control { display: grid; gap: 5px; padding: 9px 1px; border-bottom: 1px solid rgba(255, 244, 205, .09); }
.corn-volley-control:last-child { border-bottom: 0; padding-bottom: 2px; }
.corn-volley-control > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.corn-volley-control strong { font-size: 12px; }
.corn-volley-control output { font-size: 11px; font-weight: 900; }
.corn-volley-control input { width: 100%; }
.corn-volley-control small { color: rgba(236, 246, 248, .57); font-size: 9px; line-height: 1.25; }
.corn-volley-collider-toggle > span { align-items: center; }
.corn-volley-collider-toggle input { width: auto; accent-color: #56d9ff; }
.corn-volley-collider-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: -1px; }
.corn-volley-collider-dot.body { background: #56d9ff; }
.corn-volley-collider-dot.head { background: #ffd45c; }
.corn-volley-debug-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.corn-volley-debug-panel footer > div { display: flex; gap: 6px; }
.corn-volley-debug-panel footer small { color: rgba(236, 246, 248, .62); font-size: 9px; font-weight: 800; }
.corn-volley-debug-panel footer small[data-tone="error"] { color: #ff9c8f; }
.corn-volley-debug-panel footer small[data-tone="saved"] { color: #93efb5; }
.corn-volley-debug-panel footer button { min-height: 30px; padding: 0 9px; border-radius: 8px; font-size: 9px; font-weight: 900; }
.corn-volley-test {
  display: grid;
  gap: 7px;
  margin: 4px 11px 5px;
  padding: 9px;
  border: 1px solid rgba(255, 216, 79, .24);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(20, 25, 22, .78), rgba(6, 14, 20, .66));
}
.corn-volley-test-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.corn-volley-test strong { color: #fff2ad; font-size: 11px; }
.corn-volley-test button { min-height: 28px; padding: 0 9px; border-radius: 7px; font-size: 9px; font-weight: 900; }
.corn-volley-test p { margin: 0; color: rgba(239, 247, 249, .7); font-size: 9px; line-height: 1.3; }
.corn-volley-test-rate { display: grid; gap: 4px; }
.corn-volley-test-rate > span { display: flex; justify-content: space-between; gap: 8px; color: rgba(240, 248, 250, .76); font-size: 9px; font-weight: 800; }
.corn-volley-test-rate output { color: #ffdc68; font-weight: 950; }
.corn-volley-test-rate input { width: 100%; }
.corn-volley-duel-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 5px; }
.corn-volley-duel-score > i { align-self: center; color: rgba(255, 242, 173, .55); font: 950 16px/1 system-ui, sans-serif; font-style: normal; }
.corn-volley-duel-score > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 5px;
  padding: 6px 7px;
  border: 1px solid rgba(121, 217, 255, .2);
  border-radius: 7px;
  background: rgba(7, 18, 24, .64);
}
.corn-volley-duel-score > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.corn-volley-duel-score > div span { grid-column: 1; color: #9cc9d9; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.corn-volley-duel-score > div b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #fff2a3; font: 950 20px/1 system-ui, sans-serif; }
.corn-volley-duel-score > div[data-firing="true"] { border-color: rgba(255, 104, 70, .7); background: rgba(85, 22, 10, .46); box-shadow: inset 0 0 0 1px rgba(255, 189, 82, .12); }
.corn-volley-duel-score > div[data-firing="true"] span { color: #ff9d6c; }
.corn-volley-test ol {
  display: grid;
  gap: 2px;
  max-height: 72px;
  margin: 0;
  padding: 5px 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 5px;
  background: rgba(0, 0, 0, .22);
  color: rgba(221, 239, 243, .72);
  font: 700 8px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
  list-style: none;
}
.corn-volley-test ol:empty { display: none; }
.corn-volley-test[data-state="running"] { border-color: rgba(95, 203, 255, .56); box-shadow: inset 0 0 24px rgba(37, 161, 211, .06); }