.sky-visibility-debug-panel {
  --debug-accent: #ffd680;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.sky-visibility-debug-panel header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sky-visibility-debug-panel header > div { display: grid; gap: 1px; }
.sky-visibility-debug-panel header span { color: rgba(255, 234, 190, .66); font-size: 9px; font-weight: 800; }
.sky-visibility-debug-panel header button { width: 30px; min-height: 30px; padding: 0; border-radius: 8px; font-size: 20px; }
.sky-profile { display: grid; gap: 5px; margin: 9px 11px 3px; padding: 9px; border: 1px solid rgba(255, 214, 128, .2); border-radius: 9px; background: rgba(23, 29, 36, .7); }
.sky-profile label { display: grid; grid-template-columns: 1fr minmax(96px, .8fr); align-items: center; gap: 9px; color: #fff5db; font-size: 10px; font-weight: 900; }
.sky-profile select { min-height: 33px; border: 1px solid rgba(255, 214, 128, .28); border-radius: 8px; background: rgba(9, 18, 28, .94); color: #fff8e7; font-weight: 850; }
.sky-profile small, .sky-visibility-control small { color: rgba(232, 241, 246, .58); font-size: 9px; line-height: 1.25; }
.sky-visibility-controls { display: grid; align-content: start; overflow: auto; overscroll-behavior: contain; padding: 4px 11px 10px; }
.sky-visibility-controls h3 { margin: 7px 0 1px; padding: 6px 8px; border-left: 3px solid #ffd680; border-radius: 7px; background: rgba(255, 214, 128, .07); color: #fff0c9; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.sky-visibility-control { display: grid; gap: 5px; padding: 8px 1px; border-bottom: 1px solid rgba(225, 241, 248, .09); }
.sky-visibility-control > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sky-visibility-control strong { font-size: 11px; }
.sky-visibility-control output { color: #ffe2a3; font-size: 10px; font-weight: 900; }
.sky-visibility-control input[type="range"] { width: 100%; accent-color: #f6bf53; }
.sky-visibility-color { grid-template-columns: 1fr 55px; align-items: center; }
.sky-visibility-color > span, .sky-visibility-color small { grid-column: 1; }
.sky-visibility-color input[type="color"] { grid-column: 2; grid-row: 1 / span 2; width: 55px; height: 32px; padding: 2px; border: 1px solid rgba(255, 225, 162, .28); border-radius: 7px; background: rgba(255, 255, 255, .06); }
.sky-visibility-debug-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sky-visibility-debug-panel footer > div { display: flex; gap: 6px; }
.sky-visibility-debug-panel footer small { color: rgba(226, 241, 247, .66); font-size: 9px; font-weight: 800; }
.sky-visibility-debug-panel footer small[data-tone="error"] { color: #ff9d8c; }
.sky-visibility-debug-panel footer button { min-height: 30px; padding: 0 9px; border-radius: 8px; font-size: 9px; font-weight: 900; }
.sky-visibility-debug-panel footer button[data-sky-save] { background: #e4b44f; color: #241b09; }