/* Settings component tokens. */
.settings-content { padding: 20px 20px; padding-top: 0; }
.setting-group { margin-bottom: 0; }
#settings-drawer .quiz-only[hidden] { display: none !important; }
.setting-label { display: block; margin-top: 15px; margin-bottom: 15px; font-weight: 600; font-size: 14px; color: var(--sub-text-color); letter-spacing: 0.5px; }
.mode-toggle-container { background-color: var(--toggle-bg-off); border-radius: 12px; padding: 4px; display: flex; position: relative; height: 44px; cursor: pointer; user-select: none; box-sizing: border-box; }
.mode-glider { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background-color: var(--card-bg); border-radius: 9px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 1; transition: transform var(--duration-fast) var(--ease-standard); }
[data-theme="dark"] .mode-glider { background-color: #3D3D3D; }
.mode-item { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--sub-text-color); z-index: 2; position: relative; }
.mode-item.active { color: var(--text-color); font-weight: 600; }
.mode-toggle-container.toggled .mode-glider { transform: translateX(100%); }
.mode-item.disabled { opacity: 0.5; cursor: not-allowed; }
.theme-options { display: flex; gap: 15px; justify-content: flex-start; }
.theme-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.theme-btn:active { transform: scale(0.95); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; margin-top: 10px; margin-bottom: 10px; }
.toggle-info { display: flex; flex-direction: column; }
.toggle-title { font-size: 15px; font-weight: 500; color: var(--text-color); }
.toggle-status { font-size: 12px; color: var(--sub-text-color); margin-top: 4px; }
.switch-checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-checkbox:focus-visible + .switch-label { outline: 2px solid var(--primary-color, #2675d8); outline-offset: 3px; }
.switch-label { display: block; width: 50px; height: 28px; background: var(--toggle-bg-off); border-radius: 50px; position: relative; cursor: pointer; }
.switch-label::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.switch-checkbox:checked + .switch-label { background: var(--toggle-on-bg); }
.switch-checkbox:checked + .switch-label::after { transform: translateX(22px); }
.btn-reset { width: 100%; padding: 14px; background-color: var(--bg-color); color: var(--error-text); border: 1px solid var(--error-color); border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.btn-reset:active { background-color: var(--error-color); color: var(--error-text); }

.theme-btn,
.switch-label,
.mode-toggle-container {
  transition-duration: var(--duration-fast);
}