.preferences-title { font-size: 21px; font-weight: 500; margin: 12px 0 25px; }
.preferences-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.preferences-grid fieldset { border: 1px solid var(--line); border-radius: 4px; padding: 22px; margin: 0; background: #111714; min-width: 0; }
.preferences-grid legend { padding: 0 8px; color: var(--lime); font-size: 13px; }
.preference { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 20px; color: var(--muted); font-size: 12px; }
.preference:last-child { margin-bottom: 0; }
.preference input[type=color] { border: 1px solid #465440; background: none; width: 60px; height: 34px; border-radius: 3px; padding: 3px; cursor: pointer; }
.preference select, .preference input[type=number] { min-width: 0; max-width: 150px; padding: 8px; color: var(--text); background: #182219; border: 1px solid #465440; border-radius: 3px; font: inherit; }
.preference input[type=checkbox] { accent-color: var(--lime); width: 17px; height: 17px; }
.preference input[type=range] { accent-color: var(--lime); width: 120px; }
.preference span { display: flex; align-items: center; gap: 10px; }
.preference output { min-width: 20px; color: var(--text); }
.preferences-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 24px; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { .preferences-grid { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 600px) {
  .preferences-grid fieldset { padding: 18px 14px; }
  .preference { flex-wrap: wrap; gap: 10px; }
  .preference select, .preference input[type=number] { font-size: 16px; min-height: 44px; }
}