/* ══════════════════ Root Theme ══════════════════ */
:root {
  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-silver: #c0c0c0;
  --color-gray-100: #dfdfdf;
  --color-gray-200: #e6e6e6;
  --color-gray-300: #9a9a9a;
  --color-gray-400: #808080;
  --color-gray-500: #404040;

  /* Accent */
  --color-green: #06A000;
  --color-green-bright: #00ff2a;

  /* Text */
  --color-text-muted: #7B87A2;

  /* LIGHT MODE */
  --bg-main: var(--color-white);
  --bg-panel: linear-gradient(to bottom, var(--color-white), var(--color-gray-200));

  --border-light: var(--color-white);
  --border-dark: var(--color-gray-400);

  --control-bg: var(--color-silver);
  --control-shadow-dark: var(--color-gray-500);
  --control-shadow-light: var(--color-gray-100);
}

/* ══════════════════ Dark Theme ══════════════════ */

:root.dark {
  --bg-main: #1e1e1e;
  --bg-panel: linear-gradient(to bottom, #2a2a2a, #1a1a1a);

  --color-text-muted: #a9b3c7;

  --color-silver: #3a3a3a;
  --color-gray-100: #2b2b2b;
  --color-gray-200: #252525;
  --color-gray-300: #3f3f3f;
  --color-gray-400: #5a5a5a;
  --color-gray-500: #0f0f0f;

  --border-light: #3a3a3a;
  --border-dark: #000000;

  --control-bg: #2f2f2f;
}

/* ══════════════════ Layout ══════════════════ */

.options-content {
  padding: 16px;
  width: 600px;
  height: 338px;
  background: var(--bg-main);
}

/* ══════════════════ Group Panel ══════════════════ */

.options-group {
  border: 2px solid var(--border-dark);
  border-right-color: var(--border-light);
  border-bottom-color: var(--border-light);

  padding: 10px;
  margin-bottom: 12px;

  background: var(--bg-panel);
}

/* ══════════════════ Row Layout ══════════════════ */

.options-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.label-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

label {
  font-size: 17px;
}

/* ══════════════════ Text ══════════════════ */

.options-desc {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ══════════════════ Checkbox ══════════════════ */

.options-checkbox {
  appearance: none;
  width: 34px;
  height: 34px;

  background: var(--control-bg);

  border: 2px solid var(--border-light);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);

  box-shadow:
    inset -1px -1px 0 var(--color-gray-400),
    inset 1px 1px 0 var(--color-gray-100);

  position: relative;
  cursor: pointer;
}

.options-checkbox:checked {
  background: var(--color-green-bright);
}

/* ══════════════════ Slider ══════════════════ */

.slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 320px;
}

.slider-box {
  position: relative;
  width: 200px;
  height: 8px;

  background: var(--color-gray-300);

  border: 2px solid var(--border-dark);
  border-right-color: var(--border-light);
  border-bottom-color: var(--border-light);

  overflow: hidden;
}

.slider-fill {
  position: absolute;
  height: 100%;
  width: 0%;
  background: var(--color-green);
}

input[type="range"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.volume-value {
  width: 80px;
  text-align: right;
  font-size: 14px;
}

/* ══════════════════ States ══════════════════ */

.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ══════════════════ Form Controls ══════════════════ */

select {
  font-size: 14px;
  background: var(--control-bg);

  border: 2px solid var(--color-gray-400);
  border-right-color: var(--border-light);
  border-bottom-color: var(--border-light);
}

/* ══════════════════ Button ══════════════════ */