/* Responsive rules are intentionally isolated from the component styles. */
@media (max-width: 1000px) {
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.content { padding: 28px; }
}
@media (max-width: 700px) {
	.app { grid-template-columns: 1fr; }
	.sidebar { min-height: 0; padding: 16px; }
	.brand { padding: 0 5px 16px; }
	.sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
	.sidebar nav a { font-size: 10px; flex-direction: column; gap: 3px; padding: 8px 2px; text-align: center; }
	.sidebar nav .app-icon { width: 20px; height: 20px; }
	.sidebar-bottom { padding: 10px 4px 0; }
	.content { padding: 23px 15px; }
	.stats { gap: 10px; }
	.stat { padding: 15px; }
	.stat strong { font-size: 25px; }
	.panel { padding: 17px; }
	.form-grid { grid-template-columns: 1fr; }
	.accordion > summary { padding: 17px; }
	.accordion > .form-grid, .accordion > form, .accordion > p, .accordion > .table-wrap, .accordion > h2 { margin-left: 17px; margin-right: 17px; }
}

@media (max-width: 650px) {
	.settings-row, .appearance-form { align-items: stretch; flex-direction: column; }
	.settings-list { margin-left: 18px; margin-right: 18px; }
	.icon-preview { margin-bottom: 0; }
}

@media (max-width: 700px) {
	.settings-tabs { gap: 4px; }
	.settings-tab { flex: 1 1 auto; justify-content: center; padding: 10px; font-size: 12px; }
}
@media (max-width: 420px) {
	.settings-tab { flex-basis: calc(50% - 4px); }
}