.ui-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 6px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-fill);
  color: var(--ui-text);
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

a.ui-btn,
a.ui-btn:link,
a.ui-btn:hover,
a.ui-btn:focus,
a.ui-btn:active,
a.ui-btn:visited {
  color: var(--ui-text);
  text-decoration: none;
}

.ui-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ui-btn:hover:not(:disabled):not(.ui-btn--primary):not(.ui-btn--danger):not(.ui-btn--ghost) {
  background: var(--ui-fill-hover);
}

.ui-btn--primary {
  border-color: color-mix(in srgb, var(--ui-accent) 35%, transparent);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

a.ui-btn--primary,
a.ui-btn--primary:link,
a.ui-btn--primary:hover,
a.ui-btn--primary:focus,
a.ui-btn--primary:active,
a.ui-btn--primary:visited {
  color: var(--ui-on-accent);
}

.ui-btn--primary:hover:not(:disabled) {
  background: var(--ui-accent-hover);
  border-color: color-mix(in srgb, var(--ui-accent-hover) 35%, transparent);
}

.ui-btn--danger {
  border-color: color-mix(in srgb, var(--ui-danger) 35%, transparent);
  background: var(--ui-danger);
  color: var(--ui-on-accent);
}

a.ui-btn--danger,
a.ui-btn--danger:link,
a.ui-btn--danger:hover,
a.ui-btn--danger:focus,
a.ui-btn--danger:active,
a.ui-btn--danger:visited {
  color: var(--ui-on-accent);
}

.ui-btn--danger:hover:not(:disabled) {
  background: var(--ui-danger-hover);
  border-color: color-mix(in srgb, var(--ui-danger-hover) 35%, transparent);
}

.ui-btn--success {
  border-color: color-mix(in srgb, var(--ui-success) 35%, transparent);
  background: var(--ui-success);
  color: var(--ui-on-accent);
}

a.ui-btn--success,
a.ui-btn--success:link,
a.ui-btn--success:hover,
a.ui-btn--success:focus,
a.ui-btn--success:active,
a.ui-btn--success:visited {
  color: var(--ui-on-accent);
}

.ui-btn--success:hover:not(:disabled) {
  background: var(--ui-success-hover, var(--ui-success));
  border-color: color-mix(in srgb, var(--ui-success-hover, var(--ui-success)) 35%, transparent);
}

.ui-btn--ghost {
  background: transparent;
}

.ui-btn--tiny {
  min-height: 28px;
  padding: 2px 10px;
  font-size: .85em;
}

.ui-field {
  display: block;
  width: min(100%, 280px);
  max-width: 100%;
}

.ui-field--wide {
  width: min(100%, 320px);
}

.ui-field--full {
  width: 100%;
  max-width: 100%;
}

.ui-input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ui-height);
  padding: 6px 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-input-bg);
  color: var(--ui-input-text);
  font: inherit;
}

textarea.ui-input {
  max-width: 100%;
  resize: vertical;
  min-height: 2.4em;
  min-height: 2lh;
}

.ui-input::placeholder {
  color: color-mix(in srgb, var(--ui-input-text) 45%, transparent);
}

.ui-input:focus {
  outline: none;
  background: var(--ui-input-bg-hover);
  border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 12%, transparent);
}

.ui-input:disabled {
  color: color-mix(in srgb, var(--ui-input-text) 55%, transparent);
  background: color-mix(in srgb, var(--ui-input-bg) 65%, transparent);
  border-color: rgba(0, 0, 0, .12);
  opacity: 1;
  cursor: not-allowed;
  -webkit-text-fill-color: color-mix(in srgb, var(--ui-input-text) 55%, transparent);
}

.ui-select {
  position: relative;
  width: min(100%, 220px);
  max-width: 100%;
}

.ui-select--wide {
  width: min(100%, 320px);
}

/* Native <select class="ui-select"> (classic PHP pages) */
select.ui-select {
  box-sizing: border-box;
  display: inline-flex;
  width: auto;
  min-width: 10em;
  max-width: 100%;
  min-height: var(--ui-height);
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background-color: var(--ui-input-bg);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--ui-input-text);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

select.ui-select:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
}

select.ui-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 12%, transparent);
}

select.ui-select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

select.ui-select--wide {
  width: min(100%, 320px);
}

.ui-select__control {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: var(--ui-height);
  padding: 6px 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-fill);
  color: var(--ui-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ui-select__control:hover,
.ui-select.is-open .ui-select__control {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
}

.ui-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select__chevron {
  flex: 0 0 auto;
  opacity: .55;
  font-size: .75em;
}

.ui-select__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-height: 240px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: rgba(var(--ds-info-rgb, 255, 255, 255), .96);
  color: var(--ui-text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
  overflow: hidden;
}

.ui-select__search {
  margin: 8px;
  width: calc(100% - 16px);
}

.ui-select__list {
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow: auto;
  max-height: 190px;
}

.ui-select__option {
  padding: 8px 12px;
  cursor: pointer;
  line-height: 1.3;
}

.ui-select__option:hover,
.ui-select__option.is-active {
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}

.ui-select__empty {
  padding: 10px 12px;
  opacity: .65;
  font-size: .9em;
}

.ui-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
}

.ui-form-row .ui-input {
  width: auto;
  min-width: 12em;
  flex: 1 1 12em;
}

.ui-form-row select.ui-select {
  flex: 0 1 auto;
}

.ui-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  cursor: pointer;
  line-height: 1.35;
}

.ui-check--inline {
  display: inline-flex;
  align-items: center;
  margin: 0;
  white-space: nowrap;
}

.ui-check--inline input[type="checkbox"] {
  margin-top: 0;
}

.ui-check input[type="checkbox"] {
  width: 1.05em;
  height: 1.05em;
  margin-top: 3px;
  flex-shrink: 0;
  padding: 0;
  background-color: rgba(var(--ds-info-rgb, 255, 255, 255), .85);
  border: 1px solid var(--ui-line);
  border-radius: 3px;
  accent-color: var(--ui-accent);
  cursor: pointer;
  -webkit-appearance: auto;
  appearance: auto;
}

.ui-switch {
  align-items: center;
}

.ui-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}

.ui-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 2.1em;
  height: 1em;
  margin-top: 0;
  background-color: rgba(var(--ds-info-rgb, 255, 255, 255), .85);
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  transition: background-color .15s ease, border-color .15s ease;
}

.ui-switch__track::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(1.15em - 4px);
  height: calc(1.15em - 4px);
  border-radius: 50%;
  background: var(--ui-accent, #D0B690);
  transition: transform .15s ease;
}

.ui-switch input:checked + .ui-switch__track {
  background-color: var(--ui-accent, #D0B690);
  border-color: var(--ui-accent, #D0B690);
}

.ui-switch input:checked + .ui-switch__track::after {
  background: rgba(var(--ds-info-rgb, 255, 255, 255), .95);
  transform: translateX(0.95em);
}

.ui-switch--disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ui-range {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 28em;
  margin: 4px 0 10px;
}

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

.ui-range__value {
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Same range chrome as settings (озвучка) — also used in /cw3 which does not load common_ui.css */
input[type="range"] {
  --range-progress: 0%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  height: 1.25rem;
  min-height: 24px;
  margin: 0;
  padding: 0;
  accent-color: var(--ui-accent, #d0b690);
  cursor: pointer;
  box-sizing: border-box;
  color: inherit;
  font: inherit;
}

input[type="range"]:hover,
input[type="range"]:focus,
input[type="range"]:focus-visible {
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

input[type="range"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  border: none;
  background: linear-gradient(
    to right,
    var(--ui-accent, #d0b690) 0%,
    var(--ui-accent, #d0b690) var(--range-progress),
    var(--ui-input-bg, #000000) var(--range-progress),
    var(--ui-input-bg, #000000) 100%
  );
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ui-accent, #d0b690);
  border: 2px solid var(--ui-input-bg, #000000);
  margin-top: -5px;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  border: none;
  background: var(--ui-input-bg, #000000);
}

input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 4px;
  background: var(--ui-accent, #d0b690);
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ui-accent, #d0b690);
  border: 2px solid var(--ui-input-bg, #000000);
  cursor: pointer;
  box-sizing: border-box;
}

input[type="range"]::-ms-track {
  height: 4px;
  border: none;
  color: transparent;
  background: transparent;
}

input[type="range"]::-ms-fill-lower {
  background: var(--ui-accent, #d0b690);
  border-radius: 4px;
}

input[type="range"]::-ms-fill-upper {
  background: var(--ui-input-bg, #000000);
  border-radius: 4px;
}

input[type="range"]::-ms-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ui-accent, #d0b690);
  border: 2px solid var(--ui-input-bg, #000000);
  cursor: pointer;
}

.ui-file {
  display: block;
  width: min(100%, 320px);
  max-width: 100%;
}

.ui-file--wide {
  width: 100%;
}

.ui-file__label {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  cursor: pointer;
}

.ui-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-file__button {
  flex-shrink: 0;
  pointer-events: none;
}

.ui-file__label:focus-within .ui-file__button {
  outline: none;
  border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 12%, transparent);
}

.ui-file__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .9em;
  line-height: 1.35;
  opacity: .78;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-file__names {
  margin: 6px 0 0;
  font-size: .88em;
  line-height: 1.4;
  word-break: break-word;
}

.ui-file--wide .ui-file__label {
  flex-wrap: wrap;
}

/* Semantic color utilities */
.bg-primary {
  background: var(--ui-accent-faint);
  color: var(--ui-text);
}

.bg-secondary {
  background: var(--ui-secondary);
  color: var(--ui-text);
}

.bg-danger {
  background: var(--ui-danger-soft);
  color: var(--ui-text);
}

.bg-success {
  background: var(--ui-success-soft);
  color: var(--ui-text);
}

.bg-warning {
  background: var(--ui-warning-soft);
  color: var(--ui-text);
}

.bg-info {
  background: var(--ui-info-soft);
  color: var(--ui-text);
}

.text-primary { color: var(--ui-accent); }
.text-secondary { color: var(--ui-text-muted); }
.text-danger { color: var(--ui-danger); }
.text-success { color: var(--ui-success); }
.text-warning { color: var(--ui-warning); }
.text-info { color: var(--ui-info); }
.text-muted { color: var(--ui-text-muted); }
.text-body { color: var(--ui-text); }
.text-on-accent { color: var(--ui-on-accent); }