/* ── Settings App ── */
.settings-wrap { height: 100%; display: flex; }
.settings-sidebar {
	width: 112px;
	background: rgba(255,255,255,0.05);
	border-right: 1px solid rgba(255,255,255,0.07);
	padding: 10px 6px;
	flex-shrink: 0;
}
.settings-nav-item { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 11px; line-height: 1.2; transition: background var(--transition-dur); }
.settings-nav-item:hover { background: rgba(255,255,255,0.08); }
.settings-nav-item.active { background: rgba(var(--accent-rgb), 0.2); color: rgba(var(--accent-rgb), 1); }
.settings-nav-item i { font-size: 13px; flex-shrink: 0; }
.settings-content { flex: 1; padding: 14px; overflow-y: auto; user-select: text; }
.settings-section-title { font-size: 13px; font-weight: 500; margin-bottom: 12px; color: rgba(255,255,255,0.9); }
.settings-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); gap: 10px; }
.settings-row-info { flex: 1; }
.settings-row-label { font-size: 12px; }
.settings-row-desc { font-size: 10px; color: rgba(255,255,255,0.32); margin-top: 1px; }
.toggle-sw { width: 38px; height: 21px; border-radius: 11px; cursor: pointer; position: relative; flex-shrink: 0; background: rgba(255,255,255,0.12); transition: background 0.2s; }
.toggle-sw.on { background: rgba(var(--accent-rgb), 0.65); }
.toggle-knob { position: absolute; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; transition: left 0.2s, right 0.2s; }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; box-sizing: border-box; transition: border 0.15s, transform 0.1s; }
.color-swatch:hover { transform: scale(1.15); }
.settings-select { background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 5px 8px; font-size: 11px; cursor: pointer; font-family: inherit; flex-shrink: 0; transition: background var(--transition-dur), border-color var(--transition-dur); outline: none; }
.settings-select:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.settings-select:focus { border-color: rgba(var(--accent-rgb), 0.6); }
.settings-select option { background: #0a0520; color: white; }
.settings-slider { width: 110px; height: 5px; flex-shrink: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.1); border-radius: 2.5px; outline: none; }
.settings-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-color); cursor: pointer; transition: transform 0.1s; }
.settings-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.settings-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-color); cursor: pointer; border: none; }
.settings-btn { background: rgba(var(--accent-rgb), 0.15); color: rgba(255,255,255,0.85); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 7px; padding: 7px 14px; font-size: 11px; cursor: pointer; font-family: inherit; transition: background var(--transition-dur), border-color var(--transition-dur); display: inline-flex; align-items: center; gap: 5px; }
.settings-btn:hover { background: rgba(var(--accent-rgb), 0.3); border-color: rgba(var(--accent-rgb), 0.5); }
.settings-btn-danger { background: rgba(255,60,60,0.12); color: rgba(255,120,120,0.9); border-color: rgba(255,80,80,0.25); }
.settings-btn-danger:hover { background: rgba(255,60,60,0.24); border-color: rgba(255,80,80,0.45); }
.settings-info-box { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 10px 12px; font-size: 11px; color: rgba(255,255,255,0.52); line-height: 2.1; border: 1px solid rgba(255,255,255,0.06); }
.settings-info-box span { color: rgba(255,255,255,0.28); display: inline-block; width: 72px; }
.settings-resource { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 11px; }
.settings-resource-label { width: 100px; color: rgba(255,255,255,0.6); }
.settings-resource-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; min-width: 60px; }
.settings-resource-fill { height: 100%; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.5), rgba(var(--accent-rgb),0.85)); border-radius: 3px; transition: width 0.5s ease; }
.settings-resource-value { width: 56px; text-align: right; color: rgba(var(--accent-rgb), 0.9); font-weight: 500; }

/* Light mode */
#os.light-mode .settings-content { color: #1a1a2e; }
#os.light-mode .settings-sidebar { background: rgba(0,0,0,0.06); border-right-color: rgba(0,0,0,0.08); }
#os.light-mode .settings-row-desc { color: rgba(20,20,50,0.45); }
#os.light-mode .settings-info-box { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: rgba(20,20,50,0.65); }
#os.light-mode .settings-info-box span { color: rgba(20,20,50,0.4); }