.settings-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-5); }
.settings-navigation { align-self: start; }
.settings-list { display: flex; flex-direction: column; gap: 2px; }
.settings-list__item { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px; border-radius: var(--radius-sm); color: var(--color-gray-600); text-align: left; transition: background var(--transition-fast), color var(--transition-fast); }
.settings-list__item:hover { background: var(--color-gray-50); color: var(--color-navy-800); }
.settings-list__item.is-active { background: var(--color-teal-100); color: var(--color-teal-700); }
.settings-list__icon { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 6px; background: var(--color-gray-100); }
.settings-list__item.is-active .settings-list__icon { background: var(--color-white); }
.settings-list__icon svg { width: 14px; height: 14px; }
.settings-list__item > span:nth-child(2) { min-width: 0; flex: 1; }
.settings-list__item strong, .settings-list__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-list__item strong { color: var(--color-gray-800); font-size: 11px; }
.settings-list__item.is-active strong { color: var(--color-teal-700); }
.settings-list__item small { margin-top: 2px; color: var(--color-gray-500); font-size: 9px; }
.settings-list__item > svg { width: 13px; height: 13px; color: var(--color-gray-400); }
@media (max-width: 920px) { .settings-layout { grid-template-columns: 1fr; } .settings-navigation .card__body { padding-top: 10px; } .settings-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .settings-list { grid-template-columns: 1fr; } }