@import "./analysis-polish.css";

:root {
  --dv-sidebar-width: 320px;
  --dv-gap: 16px;
  --dv-line: #26272b;
  --dv-bg: #0f0f0f;
  --dv-panel-bg: #141416;
  --dv-text: #f5f7ff;
  --dv-muted: #a0aec0;
  --dv-chip-bg: #1f2024;
  --dv-input-bg: #1b1d22;
  --dv-statusbar-bg: rgba(20, 22, 26, 0.92);
  --dv-details-bg: rgba(76, 141, 255, 0.1);
  --dv-disabled-bg: rgba(255, 255, 255, 0.06);
  --dv-accent: #4c8dff;
  --dv-accent-soft: rgba(76, 141, 255, 0.18);
  --focus-ring: rgba(255, 255, 255, 0.32);
  --header-h: 0px;
  --controls-h: 0px;
}

body.light {
  --dv-line: #d8dde6;
  --dv-bg: #f7f9fc;
  --dv-panel-bg: #ffffff;
  --dv-text: #1a2a3a;
  --dv-muted: #5a6b7c;
  --dv-chip-bg: #ffffff;
  --dv-input-bg: #fdfdfd;
  --dv-statusbar-bg: rgba(247, 249, 252, 0.8);
  --dv-details-bg: rgba(76, 141, 255, 0.06);
  --dv-disabled-bg: rgba(0, 0, 0, 0.04);
  --dv-accent: #4c8dff;
  --dv-accent-soft: rgba(76, 141, 255, 0.12);
  --focus-ring: rgba(26, 42, 58, 0.24);
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--dv-bg);
  color: var(--dv-text);
}

.dv-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.dv-topbar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px var(--dv-gap);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dv-line);
  background: var(--dv-panel-bg);
}

.dv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--dv-muted);
  align-self: flex-start;
}

.dv-breadcrumb .dv-crumb-current {
  color: var(--dv-text);
  text-decoration: none;
}

.dv-breadcrumb .dv-crumb-current:focus,
.dv-breadcrumb .dv-crumb-current:hover {
  text-decoration: underline;
}

.dv-breadcrumb .dv-crumb-divider {
  color: var(--dv-muted);
}

.dv-kpis {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dv-kpis[aria-hidden="true"] {
  display: none;
}

.dv-metrics-banner,
#analysis-metrics-banner {
  display: none !important;
}

.kpi-bar {
  width: min(1200px, 92vw);
  margin: 0.5rem auto 1rem;
}

.kpi-bar > .kpi-row {
  display: contents;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  min-width: 220px;
  min-height: 78px;
  border-radius: 12px;
  background: var(--surface-2, #141414);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  text-align: center;
}

.kpi-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.78;
  margin-bottom: 0.1rem;
}

.kpi-value {
  display: block;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(15px, 2.3vw, 27px);
  white-space: nowrap;
}

.kpi-value--accent {
  background: linear-gradient(
    90deg,
    var(--accent-cyan, #28e1ff),
    var(--accent-blue, #6aa7ff),
    var(--accent-purple, #b56cff),
    var(--accent-pink, #ff66d1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 480px) {
  .kpi-card {
    min-width: 200px;
    padding: 0.65rem 0.85rem;
  }

  .kpi-value {
    font-size: clamp(14px, 4.2vw, 23px);
  }
}

.dv-collapse {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--dv-line);
  background: var(--dv-panel-bg);
  color: var(--dv-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, color 0.2s ease;
}

.dv-collapse:hover,
.dv-collapse:focus-visible {
  border-color: var(--dv-accent);
  box-shadow: 0 0 0 2px var(--dv-accent-soft);
  background: var(--dv-accent-soft);
  color: var(--dv-accent);
}

.dv-collapse-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.dv-collapse-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.dv-collapse:focus {
  outline: 2px solid var(--dv-accent);
  outline-offset: 2px;
}

.dv-util {
  position: relative;
}

.dv-util > button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--dv-line);
  background: var(--dv-panel-bg);
  color: var(--dv-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, color 0.2s ease;
}

.dv-util > button:focus {
  outline: 2px solid var(--dv-accent);
  outline-offset: 2px;
}

.dv-util > button:focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 2px;
}

.dv-util > button:hover,
.dv-util > button:focus-visible {
  border-color: var(--dv-accent);
  box-shadow: 0 0 0 2px var(--dv-accent-soft);
  background: var(--dv-accent-soft);
  color: var(--dv-accent);
}

.dv-util > button:focus:not(:focus-visible) {
  outline: none;
}

.dv-util-menu,
#dv-util-menu {
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 200px;
  padding: 8px 0;
  border: 1px solid var(--dv-line);
  border-radius: 10px;
  background: var(--dv-panel-bg);
  box-shadow: 0 12px 32px rgba(20, 36, 60, 0.16);
  z-index: 10;
}

.dv-util-menu [role="menuitem"],
#dv-util-menu [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--dv-text);
  background: var(--dv-panel-bg);
  border: 0;
  width: 100%;
  text-align: left;
}

.dv-util-menu [role="menuitem"][aria-disabled="true"],
#dv-util-menu [role="menuitem"][aria-disabled="true"] {
  color: var(--dv-muted);
  cursor: default;
  background: var(--dv-panel-bg);
}

.dv-util-menu [role="menuitem"]:disabled,
#dv-util-menu [role="menuitem"]:disabled {
  color: var(--dv-muted);
  cursor: default;
  background: var(--dv-panel-bg);
}

.dv-util-menu [role="menuitem"]:hover:not([aria-disabled="true"]),
#dv-util-menu [role="menuitem"]:hover:not([aria-disabled="true"]) {
  background: var(--dv-accent-soft);
}

.dv-util-menu [role="menuitem"]:focus-visible,
#dv-util-menu [role="menuitem"]:focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: -2px;
  background: var(--dv-accent-soft);
}

.dv-util-menu .dv-util-divider,
#dv-util-menu .dv-util-divider {
  display: block;
  height: 1px;
  margin: 8px 0;
  background: var(--dv-line);
  width: 100%;
}

.dv-util-shortcut {
  margin-left: auto;
  font-size: 12px;
  color: var(--dv-muted);
}

.dv-workspace {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--dv-sidebar-width) 1fr;
  align-items: start;
  gap: var(--dv-gap);
  padding: var(--dv-gap);
}

.dv-app.dv-controls-collapsed .dv-workspace {
  grid-template-columns: 1fr;
}

.dv-app.dv-controls-collapsed .dv-sidebar {
  display: none;
}

.dv-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--dv-gap);
}

.dv-panel {
  background: var(--dv-panel-bg);
  border-radius: 16px;
  border: 1px solid var(--dv-line);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
  position: relative;
}

.dv-card--controls,
.dv-card--controls .dv-card-body {
  position: relative;
  overflow: visible;
}

.dv-panel.dv-panel--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(76, 141, 255, 0.3) 0%, rgba(76, 141, 255, 0.05) 65%, rgba(76, 141, 255, 0) 100%);
  box-shadow: 0 0 0 0 rgba(76, 141, 255, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.94);
  z-index: 1;
  animation: dv-panel-pulse 0.45s ease-out;
}

@keyframes dv-panel-pulse {
  0% {
    opacity: 0;
    transform: scale(0.94);
    box-shadow: 0 0 0 0 rgba(76, 141, 255, 0.25);
  }
  18% {
    opacity: 0.88;
    transform: scale(1);
    box-shadow: 0 0 0 4px rgba(76, 141, 255, 0.35);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
    box-shadow: 0 0 0 14px rgba(76, 141, 255, 0);
  }
}

.dv-panel [data-accordion-trigger] {
  margin: 0;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 12px;
}

.dv-panel [data-accordion-trigger]::after {
  content: "▾";
  font-size: 12px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.dv-panel [data-accordion-trigger][aria-expanded="false"]::after {
  transform: rotate(-90deg);
}

.dv-panel [data-accordion-trigger]:focus-visible {
  outline: 2px solid var(--accent-cyan, #28e1ff);
  outline-offset: 2px;
}

.dv-panel [data-accordion-body] {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dv-panel [data-accordion-body][hidden] {
  display: none;
}

.dv-panel .dv-actions-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.dv-panel .highlight-actions {
  margin-top: 12px;
}

.dv-panel .dv-actions-row .dv-btn {
  font-size: 14px;
  padding: 8px 12px;
}

.dv-panel .dv-actions-row .dv-btn.is-disabled {
  opacity: 0.6;
}

.dv-panel .dv-actions-row .dv-btn.is-disabled:hover,
.dv-panel .dv-actions-row .dv-btn.is-disabled:focus-visible {
  opacity: 0.6;
}

.dv-panel .dv-btn-secondary {
  background: var(--dv-chip-bg);
  border-color: var(--dv-line);
  color: var(--dv-text);
}

.dv-panel .dv-btn-secondary:hover,
.dv-panel .dv-btn-secondary:focus-visible {
  background: var(--dv-disabled-bg);
  border-color: var(--dv-line);
}

body.light .dv-panel .dv-btn-secondary {
  background: var(--dv-panel-bg);
  border-color: rgba(26, 42, 58, 0.18);
  color: var(--dv-text);
}

body.light .dv-panel .dv-btn-secondary:hover,
body.light .dv-panel .dv-btn-secondary:focus-visible {
  background: rgba(76, 141, 255, 0.08);
  border-color: rgba(26, 42, 58, 0.24);
}

.dv-panel .row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  flex-wrap: wrap;
}

.dv-panel .toggle-row {
  justify-content: space-between;
}

.dv-panel .toggle-row .field-label {
  flex: 1 1 auto;
}

.dv-panel .toggle-row .switch {
  margin-left: auto;
  flex-shrink: 0;
}

.dv-panel .toggle-row.is-disabled {
  opacity: 0.6;
}

.dv-panel .toggle-row.is-disabled .switch {
  pointer-events: none;
}

.dv-panel .toggle-row.is-disabled .slider {
  cursor: not-allowed;
}

.dv-panel .chart-fill-preview {
  width: 44px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--dv-line);
  background: var(--dv-input-bg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, background-color 0.2s ease;
}

body.light .dv-panel .chart-fill-preview {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.dv-panel label {
  font-weight: 500;
  color: var(--dv-muted);
}

.dv-panel .field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 140px;
  color: var(--dv-muted);
}

.dv-panel .chart-color-row .field-label {
  min-width: 115px;
}

.dv-panel .chart-fill-controls {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.dv-panel .chart-fill-controls .pa-select__wrap {
  width: 100%;
}

.dv-panel .chart-fill-controls .chart-fill-preview {
  width: 100%;
  height: 22px;
  display: block;
}

.dv-panel select,
.dv-panel input[type="range"],
.dv-panel input[type="date"],
.dv-panel input[type="text"],
.dv-panel input[type="search"],
.dv-panel input[type="number"],
.dv-panel input[type="checkbox"],
.dv-panel input[type="email"],
.dv-panel input[type="tel"] {
  flex: 1 1 0;
  min-width: 0;
}

.dv-panel select,
.dv-panel input[type="date"],
.dv-panel input[type="text"] {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--dv-line);
  background: var(--dv-input-bg);
  color: var(--dv-text);
  font-size: 14px;
}

.dv-panel .dv-search-field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.dv-panel .dv-search-field input[type="search"] {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--dv-line);
  background: var(--dv-input-bg);
  color: var(--dv-text);
  font-size: 14px;
}

.dv-panel .dv-search-field input[type="search"]:focus {
  outline: 2px solid #4c8dff;
  outline-offset: 1px;
}

.dv-panel .dv-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--dv-panel-bg);
  border: 1px solid var(--dv-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 36, 60, 0.16);
  padding: 6px 0;
  max-height: 220px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  display: none;
}

.ts-dropdown,
.tom-select .ts-dropdown,
.selectize-dropdown,
.choices__list--dropdown,
.dv-dropdown-menu {
  z-index: var(--z-dropdown);
}

.dv-panel .dv-search-suggestions[aria-hidden="false"] {
  display: block;
}

.dv-panel .dv-search-suggestion {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--dv-text);
  text-align: left;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
}

.dv-panel .dv-search-suggestion:hover,
.dv-panel .dv-search-suggestion:focus-visible,
.dv-panel .dv-search-suggestion.active {
  background: var(--dv-accent-soft);
}

.dv-panel .dv-search-suggestions .dv-no-results {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--dv-muted);
}

.dv-panel input[type="range"] {
  flex: 1 1 auto;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  min-width: 50px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #444;
  transition: 0.2s;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #2a2a2a;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  top: 3px;
  background: white;
  transition: 0.2s;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background: #7b61ff;
}

.switch input:checked + .slider:before {
  transform: translateX(24px);
}

.dv-panel .adv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

#filters-body .control,
#time-body .control {
  margin-bottom: 12px;
}

#filters-body .control:last-child,
#time-body .control:last-child {
  margin-bottom: 0;
}

.stepper {
  display: inline-flex;
  border: 1px solid var(--dv-line);
  border-radius: 8px;
  overflow: hidden;
}

.stepper button {
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--dv-panel-bg);
  cursor: pointer;
  font-size: 16px;
  color: var(--dv-text);
}

.stepper button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.stepper button:hover {
  background: var(--dv-accent-soft);
}

.stepper button:focus {
  outline: 2px solid var(--dv-accent);
  outline-offset: 1px;
}

.stepper button:focus-visible {
  background: var(--dv-accent-soft);
}

.stepper button:focus:not(:focus-visible) {
  outline: none;
}

.dv-panel button.ghost {
  background: none;
  border: 0;
  color: var(--dv-muted);
  cursor: pointer;
}

.dv-panel button.primary {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #4c8dff, #7a5cff);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.dv-advanced-panel.dv-card-subtle {
  background: var(--dv-panel-bg);
  border: 1px solid var(--dv-line);
  border-radius: 12px;
  box-shadow: var(--dv-card-shadow, none);
  padding: 0;
}

.dv-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--dv-text);
}

.dv-advanced-toggle:focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 2px;
}

.dv-caret {
  display: inline-flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
}

.dv-caret::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms cubic-bezier(0.33, 1, 0.68, 1);
}

.dv-advanced-toggle[aria-expanded="true"] .dv-caret::before {
  transform: rotate(45deg);
}

.dv-advanced-title {
  flex: 1 1 auto;
  font-weight: 600;
}

.dv-advanced-style {
  font-size: 0.875rem;
  color: var(--dv-muted);
}

.dv-advanced-body {
  padding: 12px 16px 16px;
  background: var(--dv-panel-bg);
}

.dv-advanced-content > * + * {
  margin-top: 8px;
}

.dv-panel details {
  border: 1px solid var(--dv-line);
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--dv-details-bg);
}

.dv-panel details.adv-panel-bg {
  background: var(--dv-panel-bg);
}

.dv-panel details > summary {
  cursor: pointer;
  font-weight: 600;
}

.dv-panel details[open] > summary {
  margin-bottom: 8px;
}
.dv-panel #chart-advanced.adv-pareto {
  padding: 0;
  background: var(--dv-panel-bg);
  border-color: var(--dv-line);
  border-radius: 12px;
  overflow: hidden;
}
.dv-panel #chart-advanced.adv-pareto > .adv-pareto-summary {
  margin: 0;
  padding: 12px 16px;
  background: var(--dv-panel-bg);
  color: var(--dv-text);
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
}
.dv-panel #chart-advanced.adv-pareto[open] > .adv-pareto-summary {
  border-bottom: 1px solid var(--dv-line);
  border-radius: 12px 12px 0 0;
  margin-bottom: 0;
}
.dv-panel #chart-advanced.adv-pareto > .adv-pareto-content {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--dv-panel-bg);
}
.dv-panel #chart-advanced.adv-pareto:not([open]) > .adv-pareto-content {
  display: none;
}

.dv-panel details .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  gap: 12px;
}

.dv-panel .range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.dv-panel .range-row .field-label {
  flex: 0 0 auto;
}

.dv-panel .range-row .range-slider {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.dv-panel .range-row .range-slider input[type="range"] {
  flex: 1 1 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.dv-panel .range-row .range-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--dv-accent-soft);
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}


.dv-panel .range-row .range-value {
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--dv-text);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
  will-change: opacity;
  z-index: 2;
}

.dv-panel .range-row .range-value.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .dv-panel .range-row .range-value,
  .dv-panel .range-row .range-value.show {
    transition: opacity 0s linear, visibility 0s linear;
  }
}

.dv-panel .range-row .stepper {
  flex: 0 0 auto;
}

.dv-panel details .toggle-row label {
  color: var(--dv-text);
}

.dv-panel details .option-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.dv-panel details .select-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.dv-panel details .select-row .field-label {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dv-muted);
}

.dv-panel details .select-row .field-label label {
  color: inherit;
}

.dv-panel details .select-row .pa-select__wrap {
  flex: 1 1 auto;
  display: flex;
}

.dv-panel details .select-row select {
  width: 100%;
}

.dv-panel details .option-row .field-label {
  flex: 0 0 40%;
}

.dv-panel details .option-row .segmented-wrap {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-start;
}

.dv-panel details .option-row .segmented-control {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dv-panel details .option-row .segmented-option {
  min-width: 40px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--dv-border-color, rgba(255,255,255,.24));
  background: rgba(255,255,255,.08);
  color: var(--dv-text,#f5f7fb);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.dv-panel details .option-row .segmented-option:hover,
.dv-panel details .option-row .segmented-option:focus {
  border-color: var(--dv-accent, #39c0ed);
  outline: none;
}

.dv-panel details .option-row .segmented-option.is-selected {
  background: var(--dv-accent, #39c0ed);
  border-color: var(--dv-accent, #39c0ed);
  color: var(--dv-contrast, #041221);
}

body.light .dv-panel details .option-row .segmented-option {
  background: rgba(0,0,0,.05);
  color: var(--dv-text,#111);
  border-color: var(--dv-border-color, rgba(0,0,0,.18));
}

body.light .dv-panel details .option-row .segmented-option.is-selected {
  background: var(--dv-accent, #1b8dd8);
  color: #fff;
  border-color: var(--dv-accent, #1b8dd8);
}

.color-dots {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
}

.color-dots .color-dot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 36px;
}

.color-dots button {
  --dot-color: #ffeb3b;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  border: 1px solid var(--dv-line);
  background: var(--dv-panel-bg);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.color-dots button::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot-color, #ffeb3b);
}

.color-dots button.is-selected,
.dv-color-popover button.is-selected {
  border-color: transparent;
}

.color-dots button.is-selected::after,
.dv-color-popover button.is-selected::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 2px solid var(--dot-color, #ffeb3b);
}

.color-dots button:focus,
.color-dots button:focus-visible,
.dv-color-popover button:focus,
.dv-color-popover button:focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 4px;
}

.color-dots button:focus:not(:focus-visible),
.dv-color-popover button:focus:not(:focus-visible) {
  outline: none;
}

.color-dots button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.color-dots button[disabled] + .dot-label {
  opacity: 0.6;
}

.color-dots .dot-label {
  pointer-events: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dv-muted);
}

.combo {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.combo input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--dv-line);
  background: var(--dv-input-bg);
  color: var(--dv-text);
}

.combo input[disabled] {
  opacity: 0.6;
}

.combo ul {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--dv-panel-bg);
  border-radius: 12px;
  border: 1px solid var(--dv-line);
  max-height: 220px;
  overflow: auto;
  box-shadow: 0 12px 32px rgba(20, 36, 60, 0.16);
  z-index: var(--z-dropdown);
}

.combo li {
  padding: 8px 16px;
  cursor: pointer;
  color: var(--dv-text);
}

.combo li[aria-selected="true"],
.combo li:hover {
  background: var(--dv-accent-soft);
}

.combo li:focus {
  outline: 2px solid var(--dv-accent);
  outline-offset: -2px;
}

.combo li:focus-visible {
  background: var(--dv-accent-soft);
}

.combo li:focus:not(:focus-visible) {
  outline: none;
}

.dv-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
}

.analysis-toolbar-card {
  background: var(--dv-panel-bg);
  border: 1px solid var(--dv-line);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(8, 15, 30, 0.18);
  display: flex;
  flex-direction: column;
}

.analysis-toolbar-card .dv-main-bar {
  padding: 16px;
  border-bottom: 0;
}

.dv-main-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--dv-line);
  flex-wrap: wrap;
}

.dv-main-bar .dv-tabs {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.dv-tabs {
  display: inline-flex;
  padding: 0;
  gap: 6px;
  border: 0;
}

.dv-main-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

  .dv-tabs button {
    padding: 10px 20px;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: var(--dv-accent-soft);
    color: var(--dv-muted);
    cursor: pointer;
    font-weight: 600;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
      background-color 0.2s ease, color 0.2s ease;
  }

  .dv-tabs button:hover,
  .dv-tabs button:focus-visible {
    border-color: var(--dv-accent);
    box-shadow: 0 0 0 2px var(--dv-accent-soft);
    color: var(--dv-accent);
  }

  .dv-tabs button[aria-selected="true"] {
    background: linear-gradient(135deg, #4c8dff, #7a5cff);
    color: #fff;
  }

  .dv-tabs button[aria-selected="true"]:hover,
  .dv-tabs button[aria-selected="true"]:focus-visible {
    color: #fff;
  }

#view-chart {
  overflow: hidden;
}

.dv-main section[role="tabpanel"] {
  flex: 1 1 auto;
  padding: 0;
  overflow: auto;
}

#view-chart,
#view-table {
  padding: 0;
  border: 0;
  background: transparent;
}

#chartContainer.chart-container {
  min-width: 0;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: initial;
}

#chartContainer.chart-container:hover {
  box-shadow: none;
}

.dv-app:not(.dv-popout-app) #chart-canvas,
.dv-app:not(.dv-popout-app) #table-grid {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dv-app:not(.dv-popout-app) #chart-canvas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  border-radius: 16px;
  align-self: start;
}

.dv-app:not(.dv-controls-collapsed) #chart-canvas {
  gap: 12px;
  justify-content: flex-start;
}

.chart-container #chart-canvas,
.chart-container #table-grid {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

#chart-canvas .subtle {
  color: var(--dv-muted);
  font-size: 14px;
}

#chart-canvas .chart-shell {
  align-self: stretch;
}

.chart-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.chart-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 0 1 auto;
  padding-bottom: 0;
  margin-bottom: 0;
  width: min(100%, 1200px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.chart-area > .subtle {
  align-self: stretch;
}

.chart-footer {
  margin-top: 8px;
  margin-bottom: 0;
  width: 100%;
}

body:not(.controls-open) .chart-area {
  min-height: calc(100vh - var(--header-h) - var(--controls-h));
  flex: 1 1 auto;
}

body.controls-open .chart-area {
  min-height: auto;
  height: auto;
  flex: 0 1 auto;
}

.chart-shell,
.chart-area,
.chart-area > .echarts,
.chart-area > canvas,
.chart-area > svg {
  margin-bottom: 0 !important;
}

.chart-card,
.dv-card,
.viz-container {
  padding-bottom: 0;
}

.chart-card {
  border: 1px solid transparent;
  box-sizing: border-box;
}

.chart-card:focus { 
  outline: none;
}

.chart-card:focus-visible {
  outline: 2px solid var(--focus-ring, #6ea8fe);
  outline-offset: 2px;
}

.chart-card[data-selected="true"],
.chart-card.selected {
  box-shadow: none;
  border-color: var(--dv-line);
}

.chart-card.placeholder,
.chart-placeholder,
.chart-dropzone,
.sortable-placeholder {
  display: none;
  border: 2px dashed var(--muted-6, #666);
  background: rgba(255, 255, 255, 0.03);
  min-height: 12px;
  height: 64px;
}

.chart-card__delete {
  width: 32px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--dv-line, rgba(255, 255, 255, 0.08));
  background: var(--dv-panel-bg, rgba(0, 0, 0, 0.3));
  color: var(--dv-text, #f0f0f0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease;
}

.chart-card__delete:hover,
.chart-card__delete:focus-visible {
  border-color: var(--dv-danger, #ff4d4f);
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.24);
  background: rgba(255, 77, 79, 0.12);
  color: var(--dv-danger, #ff4d4f);
}

.chart-card__delete:focus-visible {
  outline: 2px solid var(--dv-danger, #ff4d4f);
  outline-offset: 2px;
}

.chart-card__delete svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.chart-layout.dragging .chart-card.placeholder,
.chart-layout.dragging .chart-placeholder,
.chart-layout.dragging .chart-dropzone,
.chart-layout.dragging .sortable-placeholder,
.chart-list.dragging .chart-card.placeholder,
.chart-list.dragging .chart-placeholder,
.chart-list.dragging .chart-dropzone,
.chart-list.dragging .sortable-placeholder {
  display: block;
}

#chart-canvas .dv-chart-surface {
  width: 100%;
  height: auto;
}

.analysis-chart-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100%, 1200px);
  max-width: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.analysis-chart-wrapper[data-chart-background] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 16px;
}

.analysis-chart-wrapper[data-chart-background] .chart-svg {
  background: transparent;
  border-color: transparent;
}

.analysis-chart-wrapper[data-chart-type="radial"] {
  width: 100%;
  max-width: none;
}

.chart-wrap {
  position: relative;
  width: 100%;
}

.chart-zoomable {
  touch-action: none;
  cursor: default;
}

.chart-zoomable.chart-zoomable--pannable {
  cursor: grab;
}

.chart-zoomable.chart-zoomable--panning {
  cursor: grabbing;
}

.chart-zoom-control {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

.chart-zoom-control::before {
  content: "";
  position: absolute;
  inset: -12px -12px -12px -12px;
  border-radius: 16px;
  pointer-events: none;
}

.chart-zoom-indicator {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(17, 25, 40, 0.72);
  color: var(--dv-muted, #d7deef);
  font-size: 12px;
  letter-spacing: .01em;
  opacity: 0;
  transition: opacity .2s ease-out, background-color .2s ease-out, color .2s ease-out;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
}

.chart-zoom-indicator:hover {
  background: rgba(17, 25, 40, 0.9);
  color: var(--color-white, #ffffff);
}

.chart-zoom-control:hover .chart-zoom-indicator,
.chart-zoom-control:focus-within .chart-zoom-indicator,
.chart-zoom-indicator.chart-zoom-indicator--show {
  opacity: 1;
}

.chart-zoom-indicator:focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 2px;
}

.chart-zoom-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
}

.chart-zoom-control:hover .chart-zoom-menu,
.chart-zoom-control:focus-within .chart-zoom-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.chart-zoom-menu__item {
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: rgba(17, 25, 40, 0.72);
  color: var(--dv-muted, #d7deef);
  font-size: 12px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, transform .15s ease-out;
  backdrop-filter: blur(6px);
}

.chart-zoom-menu__item:hover,
.chart-zoom-menu__item:focus-visible {
  background: rgba(17, 25, 40, 0.9);
  color: var(--color-white, #ffffff);
  outline: none;
}

.chart-zoom-menu__item--active {
  background: var(--dv-accent, #4c8dff);
  color: #ffffff;
}

body.light .chart-zoom-indicator,
body.light .chart-zoom-menu__item {
  background: rgba(255, 255, 255, 0.85);
  color: #232936;
}

body.light .chart-zoom-indicator:hover {
  background: rgba(255, 255, 255, 0.96);
  color: #232936;
}

body.light .chart-zoom-menu__item:hover,
body.light .chart-zoom-menu__item:focus-visible {
  background: rgba(255, 255, 255, 0.96);
  color: #232936;
}

body.light .chart-zoom-menu__item--active {
  background: var(--dv-accent, #4c8dff);
  color: #ffffff;
}

.chart-wrap--buckets .bucket-top-label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--dv-chart-label-color, var(--color-white));
  text-anchor: middle;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.chart-wrap--buckets .bucket-top-label tspan {
  pointer-events: none;
}

.chart-wrap--buckets .bucket-top-label:focus {
  outline: none;
}

body.light .chart-wrap--buckets .bucket-top-label {
  fill: var(--dv-chart-label-color-light, #232936);
  text-shadow: none;
}

.chart-wrap--doma,
.chart-wrap--buckets,
.chart-wrap--pareto,
.chart-wrap--bubble {
  width: 100%;
}

.chart-tooltip {
  position: absolute;
  pointer-events: none !important;
  z-index: 100;
  transform: translate(-50%, -100%);
}

.chart-tooltip[hidden] {
  display: none;
}

.analysis-chart-wrapper .chart-svg {
  width: 100%;
  height: auto;
  min-height: 420px;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
}

.analysis-chart-wrapper[data-chart-type="donut"],
.chart-stage[data-chart-type="donut"],
.analysis-chart-wrapper[data-chart-type="radial"],
.chart-stage[data-chart-type="radial"] {
  min-height: clamp(520px, 70vh, 680px);
}

.analysis-chart-wrapper[data-chart-type="donut"] .chart-svg,
.chart-stage[data-chart-type="donut"] .chart-svg,
.analysis-chart-wrapper[data-chart-type="radial"] .chart-svg,
.chart-stage[data-chart-type="radial"] .chart-svg {
  min-height: clamp(520px, 70vh, 680px);
}

.analysis-chart-wrapper[data-chart-type="radial"] .chart-svg,
.chart-stage[data-chart-type="radial"] .chart-svg {
  max-width: none;
}

.analysis-chart-wrapper .chart-svg,
.analysis-chart-wrapper #chart {
  transform: none !important;
}

.analysis-chart-wrapper .chart-empty-state {
  margin: 0;
  align-self: stretch;
}

.chart-detached-notice {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  margin: 0;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: var(--dv-panel-bg);
  color: var(--dv-muted);
  text-align: center;
  padding: 48px 24px;
}

body.light .chart-detached-notice {
  border-color: rgba(16, 24, 40, 0.16);
  color: var(--dv-muted);
}

#view-chart[data-chart-detached="true"] .chart-detached-notice {
  display: flex;
}

#view-table[data-table-detached="true"] #table-grid {
  display: none;
}

.table-detached-notice {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  margin: 0;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: var(--dv-panel-bg);
  color: var(--dv-muted);
  text-align: center;
  padding: 48px 24px;
}

body.light .table-detached-notice {
  border-color: rgba(16, 24, 40, 0.16);
  color: var(--dv-muted);
}

#view-table[data-table-detached="true"] .table-detached-notice {
  display: flex;
}

.highlight-controls {
  align-items: center;
}

.highlight-effect-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.highlight-effect-row .field-label {
  flex: 0 0 auto;
}

.highlight-effect-row .segmented-wrap {
  flex: 1 1 auto;
}

.highlight-effect-row .segmented-control {
  width: 100%;
}

.highlight-effect-row .segmented-option {
  flex: 1 1 auto;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.highlight-effect-row .segmented-option.is-selected {
  background: var(--dv-accent);
  border-color: var(--dv-accent);
  color: #fff;
}

.highlight-explode-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 8px;
}

.highlight-explode-controls[hidden] {
  display: none;
}

.highlight-explode-controls .explode-offset-row {
  align-items: center;
}

.highlight-explode-controls .explode-offset-slider {
  flex: 1 1 auto;
}

.highlight-explode-controls .explode-offset-slider .range-value {
  font-weight: 600;
}

#highlight-effects-group.is-exploding #highlight-dots {
  display: none;
}

.chart-wrap--doma .donut-effects-note {
  position: absolute;
  top: 12px;
  right: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(17, 25, 40, 0.82);
  color: var(--dv-muted, #d7deef);
  font-size: 12px;
  letter-spacing: .01em;
  pointer-events: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(11, 16, 28, 0.38);
  z-index: 6;
}

body.light .chart-wrap--doma .donut-effects-note {
  background: rgba(245, 248, 255, 0.9);
  color: #283149;
  box-shadow: 0 6px 18px rgba(153, 167, 200, 0.35);
}

.highlight-controls + .highlight-distribution-row {
  margin-top: 12px;
}

.dv-panel #highlight-effects-group .explode-toggle-row + .explode-search-row,
.dv-panel #highlight-effects-group .explode-search-row + .explode-distribution-row,
.dv-panel #highlight-effects-group .explode-distribution-row + .highlight-explode-controls {
  margin-top: 12px;
}

.highlight-controls.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.analysis-table-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.analysis-table-card-container {
  min-height: 0;
}

.analysis-table-card-container .chart-card__body {
  padding: 16px;
}

.analysis-table-card-container .analysis-table-card {
  gap: 16px;
}

.analysis-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.analysis-table-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
}

.analysis-table-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analysis-table-add select {
  min-width: 200px;
}

.analysis-table-add-help,
.analysis-table-merge-help {
  font-size: 11px;
  line-height: 1.4;
  color: var(--dv-muted);
}

.analysis-table-merge {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.analysis-table-merge-label {
  font-size: 13px;
  font-weight: 600;
}

.analysis-table-wrapper {
  border: 1px solid var(--dv-line);
  border-radius: 16px;
  overflow: hidden;
  --analysis-table-row-height: 46px;
}

.analysis-table-scroll {
  display: block;
  max-height: calc(20 * var(--analysis-table-row-height, 46px));
  overflow: auto;
  scrollbar-gutter: stable;
}

.analysis-table-scroll table {
  width: 100%;
}

.analysis-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

.analysis-table-wrapper thead th,
.analysis-table-wrapper tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--dv-line);
}

.analysis-table-empty {
  text-align: center;
  padding: 32px;
  color: var(--dv-muted);
}

.dv-statusbar {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid var(--dv-line);
  border-top: 1px solid var(--dv-line);
  background: var(--dv-statusbar-bg);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  width: min(100%, 1200px);
  margin: 0 auto;
  box-sizing: border-box;
}

.dv-statusbar.visible {
  display: flex;
  opacity: 1;
}

#filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid var(--dv-line);
  background: var(--dv-chip-bg);
  font-size: 13px;
}

.chip button {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 1024px) {
  .dv-workspace {
    grid-template-columns: 1fr;
  }
  .dv-sidebar {
    order: 2;
  }
  .dv-main {
    order: 1;
  }
}

@media (max-width: 720px) {
  .dv-topbar {
    padding: 14px var(--dv-gap);
    padding-bottom: calc(14px + 48px);
  }
  .dv-util {
    justify-self: flex-end;
  }
  .dv-main-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .dv-main-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
}

.dv-color-popover {
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--dv-line);
  background: var(--dv-panel-bg);
  box-shadow: 0 12px 28px rgba(20, 36, 60, 0.18);
  z-index: 40;
}

.dv-color-popover button {
  --dot-color: #ffeb3b;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  border: 1px solid var(--dv-line);
  background: var(--dv-panel-bg);
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dv-color-popover button::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot-color, #ffeb3b);
}

#highlight-row {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

#panel-highlights {
  overflow: visible;
}

#panel-highlights [data-accordion-body] {
  overflow: visible;
}

#panel-highlights .toggle-row .dv-help-link {
  position: relative;
}

#highlight-row.is-disabled {
  opacity: 0.55;
}

#highlight-row.is-disabled .color-dots,
#highlight-row.is-disabled .combo,
#highlight-row.is-disabled #highlight-clear {
  pointer-events: none;
}

#highlight-row.is-disabled .combo input,
#highlight-row.is-disabled #highlight-clear {
  cursor: not-allowed;
}

.highlight-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.explode-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dv-popout {
  background: var(--dv-bg);
  color: var(--dv-text);
}

.dv-popout.light {
  background: #ffffff;
  color: #0f0f0f;
}

.dv-popout .popout-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: inherit;
}

.dv-popout .popout-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--dv-line);
}

.dv-popout.light .popout-toolbar {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.dv-popout #dockBtn {
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
}

.dv-popout .popout-mount {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.dv-popout .chart-svg text,
.dv-popout .chart-svg tspan {
  fill: var(--dv-text);
}

.dv-popout .donut-label-line {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1px;
  pointer-events: none;
}

.dv-popout.light .donut-label-line {
  stroke: rgba(26, 42, 58, 0.28);
}

/* Popout full-bleed layout */
.popout-body, .popout-root, .chart-stage {
  width: 100vw;
  height: 100vh;
}

.popout-body {
  margin: 0;
  padding: 0;
  background: var(--dv-bg, #0b0b0b);
  overflow: hidden;
}

.popout-body.light {
  background: #ffffff;
  color: #0f0f0f;
}

.popout-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: inherit;
  color: inherit;
}

.popout-root.light {
  background: #ffffff;
  color: #0f0f0f;
}

.popout-root .chart-stage {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.popout-root[data-panel="table"] {
  overflow: auto;
}

.popout-root[data-panel="table"] .chart-stage {
  overflow: auto;
}

.popout-root #chartContainer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.popout-root #chart-canvas {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 12px;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.popout-root .chart-shell,
.popout-root .chart-area,
.popout-root .analysis-chart-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}

.popout-root .chart-area {
  max-width: none;
}

.popout-root .analysis-chart-wrapper {
  position: relative;
}

.popout-root .analysis-chart-wrapper .chart-svg,
.popout-root .chart-stage svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
}

.popout-root .chart-footer {
  margin-top: 0;
  padding-top: 8px;
}

.popout-root .dv-statusbar {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.popout-root .card,
.popout-root .panel,
.popout-root .chart-card {
  background: transparent;
  box-shadow: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.popout-root .chart-stage .chart-empty-state {
  align-self: stretch;
}

.popout-root .chart-stage svg {
  overflow: visible;
}

html, body {
  height: 100%;
}