.water-wave-debug-panel {
  position: fixed;
  top: 82px;
  left: 14px;
  z-index: 20;
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100dvh - 98px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(33, 93, 111, 0.34);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(239, 252, 252, 0.96), rgba(207, 235, 239, 0.94));
  box-shadow: 0 8px 26px rgba(21, 56, 67, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(9px);
  color: #284c56;
  pointer-events: auto;
}
.water-wave-debug-panel.hidden { display: none; }
.water-wave-debug-panel header,
.water-wave-debug-panel footer,
.water-wave-toggle > span,
.water-wave-control > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.water-wave-debug-panel header { padding: 1px 2px 8px; border-bottom: 1px solid rgba(38, 96, 112, 0.15); }
.water-wave-debug-panel header > div { display: grid; gap: 1px; }
.water-wave-debug-panel header small { color: #63808a; font-size: 9px; font-weight: 900; letter-spacing: 0.1em; }
.water-wave-debug-panel header strong { font-size: 15px; }
.water-wave-debug-panel button { border: 1px solid rgba(42, 94, 109, 0.24); border-radius: 7px; background: rgba(255, 255, 255, 0.58); color: #355c67; font-weight: 800; cursor: pointer; }
.water-wave-debug-panel header button { width: 28px; height: 28px; font-size: 19px; line-height: 1; }
.water-wave-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 5px; padding: 7px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.48); cursor: pointer; }
.water-wave-toggle > span { justify-content: flex-start; }
.water-wave-toggle small { color: #6a858c; font-size: 10px; }
.water-wave-toggle input { accent-color: #2ebbd4; }
.water-wave-controls { display: grid; gap: 5px; }
.water-wave-section-title { margin: 6px 2px 0; color: #537680; font-size: 10px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.water-wave-control { display: grid; gap: 4px; padding: 7px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.4); }
.water-wave-control strong { font-size: 11px; }
.water-wave-control output { color: #26768a; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.water-wave-control input { width: 100%; margin: 0; accent-color: #32bfd5; cursor: pointer; }
.water-wave-color-control input[type="color"] { height: 38px; padding: 3px; border: 1px solid rgba(42, 94, 109, 0.28); border-radius: 8px; background: rgba(255, 255, 255, 0.7); }
.water-wave-color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.water-wave-color-control input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.water-wave-control small { color: rgba(42, 72, 80, 0.68); font-size: 9px; line-height: 1.25; }
.water-wave-debug-panel footer { margin-top: 7px; flex-wrap: wrap; }
.water-wave-debug-panel footer > div { display: flex; gap: 5px; }
.water-wave-debug-panel footer pre { flex: 0 0 100%; }
.water-wave-debug-panel footer button { min-height: 28px; padding: 0 10px; }
.water-wave-debug-panel footer small { color: #6a858c; font-size: 9px; }
.water-wave-debug-panel footer pre { margin: 7px 0 0; padding: 6px; border-radius: 6px; background: rgba(20, 64, 76, 0.08); color: #355c67; font: 10px/1.35 ui-monospace, monospace; white-space: pre-wrap; }
@media (max-width: 620px), (max-height: 560px) {
  .water-wave-debug-panel { top: max(54px, calc(env(safe-area-inset-top) + 48px)); left: 8px; width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 64px); padding: 8px; }
  .water-wave-control { padding: 6px 7px; }
}