.accordion-item {
  border: var(--acc-border-width, 1px) var(--acc-border-style, solid) var(--acc-border-color, var(--border, #222));
  border-radius: var(--acc-radius, 6px);
  overflow: hidden;
  margin-bottom: var(--acc-gap, 8px);
  background: var(--acc-bg, var(--surface, #161616));
  color: var(--acc-fg, inherit);
  box-shadow: var(--acc-shadow, none);
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--acc-head-pad, 14px 16px);
  background: var(--acc-head-bg, transparent);
  color: var(--acc-head-fg, inherit);
  font-size: var(--acc-title-size, inherit);
  font-weight: var(--acc-title-weight, inherit);
  cursor: var(--cursor-pointer, pointer);
  user-select: none;
  transition: background-color 0.15s ease;
}
.accordion-header:hover { background: var(--acc-head-bg-hover, var(--acc-head-bg, transparent)); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--accordion-speed, 0.3s) ease;
}
.accordion-item.is-open > .accordion-body {
  max-height: none;
  overflow: visible;
}
.accordion-item > .accordion-body.is-moving { overflow: hidden; }
.accordion-body-inner { padding: var(--acc-body-pad, 0 16px 16px); }
.accordion-item[data-accordion-open="up"] { display: flex; flex-direction: column-reverse; }
.accordion-item[data-accordion-open="up"] > .accordion-body > .accordion-body-inner { padding: var(--acc-body-pad, 16px 16px 0); }
.accordion-icon { transition: transform var(--accordion-speed, 0.3s) ease; color: var(--acc-icon-color, var(--muted, #999)); }
.accordion-item.is-open > .accordion-header .accordion-icon { transform: rotate(45deg); }
.accordion-header:focus-visible { outline: 2px solid var(--accent, #0057ff); outline-offset: -2px; }

.floating-panel-group {
  position: relative;
  display: inline-block;
}
.floating-panel-trigger { cursor: var(--cursor-pointer, pointer); }

.floating-panel {
  position: absolute;
  top: calc(100% + var(--fp-offset, 8px));
  left: 0;
  width: var(--fp-width, auto);
  min-width: min(90vw, var(--fp-min-width, 280px));
  max-width: min(90vw, var(--fp-max-width, 480px));
  max-height: 85vh;
  overflow: auto;
  background: var(--fp-bg, var(--surface, #1a1a1a));
  color: var(--fp-fg, var(--fg, #eee));
  border: var(--fp-border-width, 1px) solid var(--fp-border-color, var(--border-2, #333));
  border-radius: var(--fp-radius, 8px);
  box-shadow: var(--fp-shadow, 0 10px 40px rgba(0, 0, 0, 0.35));
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.floating-panel-group.is-open > .floating-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}
.floating-panel-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--fp-bar-pad, 10px 14px);
  background: var(--fp-bar-bg, transparent);
  border-bottom: var(--fp-border-width, 1px) solid var(--fp-border-color, var(--border, #333));
  font-weight: 600;
}
.floating-panel-close {
  background: none;
  border: none;
  color: var(--muted, #ccc);
  font-size: 20px;
  line-height: 1;
  cursor: var(--cursor-pointer, pointer);
  padding: 2px 6px;
}
.floating-panel-close:hover { color: var(--fg, #fff); }
.floating-panel-body { padding: var(--fp-pad, 16px); }
.floating-panel-group:is([data-panel-place="above"], .is-above) > .floating-panel { top: auto; bottom: calc(100% + var(--fp-offset, 8px)); }
.floating-panel-group:is([data-panel-place="above"], .is-above):not(.is-open) > .floating-panel { transform: translateY(6px); }
.floating-panel-group[data-panel-align="end"] > .floating-panel { left: auto; right: 0; }